如何在双击父元素时避免触发子元素的点击事件？
想要在快速双击子元素时避免触发父元素的双击事件，不能仅仅阻止子元素的单击事件冒泡。因为单击事件和双击事件是两个不同的事件，阻止单击事件冒泡与双击事件冒泡无关。
解决方法：
方法 1：子元素也绑定双击事件
在子元素上也绑定一个双击事件，该事件不执行任何操作，只阻止双击事件冒泡：
<div @dblclick="changeFullScreen">
<!-- 子元素绑定双击事件并阻止冒泡 -->
<div @click="showPreset($event)" @dbclick.stop="nothingFn"></div>
</div>nothingFn() 函数什么都不做。
方法 2：检查事件目标（event.target）
利用事件冒泡的原理，通过检查事件对象 event.target 来判断触发双击事件的是父元素还是子元素：
<div @dblclick="changeFullScreen">
<div @click="showPreset($event)"></div>
</div>
changeFullScreen(event) {
if (event.target === this) {
console.log('父元素触发双击事件');
}
}如果 event.target 等于 this，则表示是父元素触发了双击事件，可以执行原定操作。
以上就是如何在双击父元素时避免触发子元素的点击事件？的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
421
收藏
