如何让子元素的click事件不会影响到父元素的dbclick事件？

Z时代
2024-02-05
分类：IT

子元素有click事件，父元素有dbclick事件，想要做到快速双击子元素的时候，不要触发父元素的dbclick事件

<div @dblclick="changeFullScreen">
    <div @click.stop="showPreset($event)">
    </div>
</div>
showPreset(event) {
    console.log('aaaaa')
    // event.topImmediatePropagation()
    // return false
}
changeFullScreen() {
    console.log('bbbb')
}

尝试了给子元素添加阻止冒泡、return false等操作，均无效

回答：

你这是事件冒泡使用错误，点击事件和双击事件都不是同一个事件，你阻止单击事件冒泡跟双击事件冒泡有什么关系呢？所以你要做的是在子元素上也绑定上双击事件，但是这个双击事件什么都不做。

有两种方式，第一种是子元素也绑定双击事件，该事件什么都不做只做阻止双击事件冒泡：

<div @dblclick="changeFullScreen">
    // 在子元素上绑定双击事件并阻止双击事件冒泡
    <div @click="showPreset($event)" @dbclick.stop="nothingFn">
    </div>
</div>
// nothingFn 这个函数什么都不做
nothingFn() {};
showPreset(event) {
    console.log('aaaaa')
    // event.topImmediatePropagation()
    // return false
}
changeFullScreen() {
    console.log('bbbb')}

第二种方式是利用事件冒泡的原理，查看事件对象event.target，通过这种方式判断到底是谁触发双击事件，如果是父元素就执行，如果是子元素就不执行。

回答：

给父元素添加self修饰符:

  <div
    style="width: 100px; height: 100px; background-color: palegoldenrod"
    @dblclick.self="changeFullScreen"
  >
    <div
      style="width: 50px; height: 50px; background-color: palegreen"
      @click.stop="showPreset($event)"
    ></div>  </div>

如何让子元素的click事件不会影响到父元素的dbclick事件？