前端 dom的contains()方法 判断点击事件是否发生在指定DOM元素内部

介绍

contains 方法是 DOM 元素的方法，用于检查一个元素是否包含另一个元素。它返回一个布尔值，表示传入的节点是否为调用节点的后代节点（包括调用节点本身），如Element.classList.contains和Node.contains，这些方法用于操作DOM元素‌。

范例

document.addEventListener('click', (event) {
  if (!this.$refs.searchControl.contains(event.target)) {
     // ...
  }
 });

在这段代码，this.$refs.searchControl.contains(event.target) 用于检查 event.target 是否是 this.$refs.searchControl 的子元素或它本身。

通过这种方式，可以判断点击事件是否发生在特定的 DOM 元素内部。

实际应用

编写搜索工具栏时，可以使用Node.contains方法，判断点击搜索组件时，弹出框显示或保持显示显示，点击任意非搜索组件位置，弹出框隐藏。

关键代码

mounted(){
  document.removeEventListener('click', this.handleClickOutside);
},
methods: {
  handleClickOutside(event) {
    if (!this.$refs.searchControl.contains(event.target)) {
      // 失去焦点事件
      this.handlerBlur();
    }
  },
  handlerBlur(){
  // ...
  }
},
beforeDestory(){
  document.removeEventListener('click', this.handleClickOutside);
}

原文地址：https://blog.csdn.net/qq_45560350/article/details/104930992

免责声明：本站文章内容转载自网络资源，如侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！