el.contains(dom)

最新推荐文章于 2024-06-24 16:10:39 发布

webberQian

最新推荐文章于 2024-06-24 16:10:39 发布

阅读量961

点赞数

分类专栏： javascript 文章标签： javascript js dom

本文链接：https://blog.csdn.net/qq_40628308/article/details/110002998

版权

javascript 专栏收录该内容

25 篇文章 1 订阅

订阅专栏

本文探讨了在Vue应用中使用`Node.contains()`方法时遇到的问题，当在循环内绑定事件监听器时，由于事件冒泡和覆盖，导致只有最后一个组件的判断正确。解决方案是避免在document上绑定事件，而是在每个组件的父级上监听，但这可能引发新的问题——点击空白区域无法正确关闭。文章揭示了DOM操作和事件处理在前端框架中的复杂性，并提出了应对策略。

摘要由CSDN通过智能技术生成

Node.contains()返回的是一个布尔值，来表示传入的节点是否为该节点的后代节点。
node.contains( otherNode )

node 是否包含otherNode节点.
otherNode 是否是node的后代节点.

如果 otherNode 是 node 的后代节点或是 node 节点本身.则返回true , 否则返回 false.

但是有个坑

在vue中自定义组件中如果你循环了这个组件然后就只有最后一个才是正确的（因为documnet.onclick一直在被覆盖所以到最后只有最后一个才是对的，要解决这个问题既不要用document的上面的事件，直接用每一个的组件的父级，但是这样又会触发点击空白的地方不消失，）（也就是包含关系就会返回true）

 directives: {
    "click-panel": {
      bind(el, binding, vnode) {
        const vm = vnode.context;
        console.log(el);
        document.onclick = function (e) {
          const dom = e.target;
          const isElSon = el.contains(dom);
          console.log(el);
          console.log(dom);
          console.log(isElSon);  //只有最后一个组件的 正确操作才是true
          if (isElSon) {
          } else {
            vm.showPanel = false;
          }
        };
      },
    },
  },