如何让子元素的单击事件不影响父元素的双击事件？
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');
}
}以上就是如何避免子元素双击触发父元素的双击事件？的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告
收藏
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
392
