Vue.js 双击子元素时如何阻止父元素dblclick事件触发？

问题根因 #

你当前只对单击（click）事件做了冒泡阻止，没有针对双击（dblclick）事件做拦截，这是修饰符不生效的核心原因：

• 你写在<i>标签上的@click.stop只会阻止单击事件向上冒泡，完全不会影响双击事件的传播路径
• 你双击<i>元素时，双击事件会正常向上冒泡到外层<div>，触发父元素绑定的dblclick回调，删除<span>标签也不会改变这个逻辑

解决方法 #

给子元素<i>也添加dblclick事件的冒泡阻止修饰符即可，修改后的代码如下：

<div @dblclick="$emit('someEvent', task.id)">
        <span>
            {{task.text}}
            <i 
              @click.stop="$emit('set-task-to-edit', task.id)"
              @dblclick.stop
            ></i>
        </span>
</div>

这里额外添加的@dblclick.stop会直接拦截子元素上触发的双击事件，阻止它向上冒泡到父级<div>，就不会触发父元素的双击回调了。

如果后续需要区分单击和双击的业务逻辑，也可以把两个事件的处理逻辑整合到同一个方法内做防抖判断，避免两种事件触发冲突。

内容的提问来源于stack exchange，提问作者Alexandru Badea