美文网首页闲言碎语让前端飞Web 前端开发
js判断是否在页面非焦点区域外点击(前端工具类)

js判断是否在页面非焦点区域外点击(前端工具类)

作者: 柯琦 | 来源:发表于2018-02-24 14:29 被阅读28次

    代码:

    export default function insideNode(outerNode, innerNode) {
      if(!outerNode || !innerNode){
        return false;
      }else if(outerNode === innerNode){
        return true;
      }else if(outerNode.nodeType == 3){ //节点类型为text类型
        return false;
      }else if(innerNode.nodeType == 3){ //节点类型为text类型
        return containsNode(outerNode, innerNode.parentNode);
      }else if (outerNode.contains) {
        return outerNode.contains(innerNode);
      }else if (outerNode.compareDocumentPosition) {
        return !!(outerNode.compareDocumentPosition(innerNode) & 16);
      }else {
        return false;
      }
    }
    

    使用

    1.给父区域添加事件(一般为页面document)

    document.addEventListener('click', this.onDocumentClick);
    

    2.在onDocumentClick方法类调用insideNode并做相应操作

    onDocumentClick: function () {  
      if(!insideNode(outerNode,event.target)){
        //你的操作
      }
    },
    

    相关文章

      网友评论

        本文标题:js判断是否在页面非焦点区域外点击(前端工具类)

        本文链接:https://www.haomeiwen.com/subject/otbqxftx.html