判断一个节点是否是另一个节点的子节点,以及相关应用

自定义函数

            function isParent (obj,parentObj){
                while (obj != undefined && obj != null && obj.tagName && obj.tagName.toUpperCase() != 'BODY'){
                    if (obj == parentObj){
                        return true;
                    }
                    obj = obj.parentNode;
                 }
                return false;
            }

dom apicontains()
最早由IE提出,现在大多数浏览器都支持,除了(火狐)
这里console.log(node.contains(node)) //true

实际应用##

点击指定区域来控制侧边栏的展示与隐藏.
这个同样可以用css的z-index来做,但是用js似乎更纯粹

            document.addEventListener('click', (evt) => {
                evt.preventDefault()
                let containner = document.querySelector('.containner')
                let pannel = document.querySelector('.child')
               //如果点击容器内除侧边栏自身以外的区域,侧边栏隐藏
                if (containner.contains(evt.target) && pannel && !pannel.contains(evt.target)){
                    $scope.ifShow = false  
                }
                $scope.$apply()
            })

这里$scope.$apply()语句放在if循环内会失效(值并没有同步回视图)具体解释未知,先留个坑

contains相关参考