如何避免子元素双击触发父元素的双击事件？

哈喽！今天心血来潮给大家带来了《如何避免子元素双击触发父元素的双击事件？ 》，想必大家应该对文章都不陌生吧，那么阅读本文就都不会很困难，以下内容主要涉及到，若是你正在学习文章，千万别错过这篇文章~希望能帮助到你！

如何让子元素的单击事件不影响父元素的双击事件？

HTML 代码：

<div @dblclick="changeFullScreen">
  <div @click.stop="showPreset($event)"></div>
</div>

JavaScript 代码：

showPreset(event) {
  console.log('aaaaa');
  // event.topImmediatePropagation()
  // return false
}

changeFullScreen() {
  console.log('bbbb');
}

在这种情况下，虽然分别为子元素和父元素绑定了单击和双击事件，但当快速双击子元素时，父元素的双击事件仍会被触发。

解决方案

这不是阻止单击事件冒泡的问题，而是双击事件的错误使用。单击和双击事件是不同的事件类型。如果想要在快速双击子元素的情况下不触发父元素的双击事件，需要有以下两种方式：

方式 1：阻止双击事件冒泡

为子元素也绑定一个双击事件，但该事件只是一个空函数，用于阻止双击事件冒泡：

nothingFn() {};

// 在子元素上绑定双击事件并阻止双击事件冒泡
<div @click="showPreset($event)" @dbclick.stop="nothingFn"></div>

方式 2：区分触发双击事件的元素

通过检查事件对象 event.target 来判断是哪个元素触发了双击事件。如果是父元素，则执行双击事件；如果是子元素，则不执行双击事件：

changeFullScreen(event) {
  if (event.target === this) {
    console.log('bbbb');
  }
}

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。