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

自定义函数

            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相关参考

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容