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

Question

子元素有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等操作，均无效

Answer 1

给父元素添加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>

Answer 2

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

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

<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，通过这种方式判断到底是谁触发双击事件，如果是父元素就执行，如果是子元素就不执行。

Answer 3

要阻止子元素的 click 事件影响到父元素的 dbclick 事件，你需要使用 JavaScript 来编写更具体的逻辑来控制事件的冒泡和默认行为。在你的例子中，你已经尝试了使用 .stop 修饰符来阻止事件冒泡，但这对 dbclick 事件并不起作用。

一个解决方案是检查事件对象的 type 属性，然后根据这个属性来决定是否调用父元素的 dbclick 事件处理器。这样你就可以区分是 click 事件还是 dbclick 事件，并相应地处理它们。

下面是一个示例代码，展示了如何实现这个逻辑：

<template>  <div @dblclick="changeFullScreen" ref="parentElement">    <div @click="handleChildClick($event)">    </div>  </div></template><script>export default {  methods: {    handleChildClick(event) {      // 检查事件的类型，如果是双击事件（dblclick），则阻止默认行为并阻止冒泡      if (event.type === 'dblclick') {        event.preventDefault();        event.stopPropagation();      }    },    changeFullScreen() {      console.log('bbbb')    },  },};</script>

在这个示例中，我们给父元素添加了一个 ref，以便在 Vue 实例中引用它。然后，我们在子元素的 click 事件处理器中检查事件的类型。如果是双击事件（dblclick），我们调用 preventDefault() 来阻止默认行为，并调用 stopPropagation() 来阻止事件冒泡。这样，当用户快速双击子元素时，父元素的 dbclick 事件处理器就不会被触发。