解决子元素的click事件会触发父元素的dbclick事件

防止子元素click事件触发父元素dbclick事件的多种解决方案

原创已于 2024-01-18 10:36:17 修改 · 1k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #vue.js

于 2024-01-18 10:25:06 首次发布

日常知识专栏收录该内容

42 篇文章

订阅专栏

文章介绍了三种防止子元素click事件导致父元素dbclick事件触发的方法：阻止子元素click事件冒泡、使用event.target判断目标元素、以及在父元素上添加.self属性。通过实例展示了方案一和二的综合应用。

解决子元素的click事件会触发父元素的dbclick事件

方案一：

错误思路：通过阻止子元素click事件的冒泡，阻止父元素的dbclick
正确思路：要用子元素的dbclick事件的冒泡去阻止父元素的dbclick，子元素的dbclick方法为空

@dblclick.stop="{}"

方案二：

通过taget来确定，只有target点击到父元素的时候，采取执行父元素的dbclick方法，下面的例子中，因为子元素覆盖到了父元素上，所以采用$event.target.parentElement来确定父元素

方案三：

给父元素添加.self，前提是子元素未100%覆盖父元素

<div id="h5Id" class="h5videowrapper" @dblclick.self="changeFullScreen">
	<div class="reduce-icon" @click="showPtzSpeed()">
    </div>
</div>

方案一方案二综合案例如下：

<div id="h5Id" class="h5videowrapper" @dblclick="changeFullScreen">
	<div class="common-icon reduce-icon" @click="showPtzSpeed()" @dblclick.stop="{}">
        <img :src="speedIcon" alt="云台速度">
    </div>
</div>

<script>
	// 父元素的双击事件
	changeFullScreen($event) {
		if ($event.target.parentElement.classList.value.indexOf('h5videowrapper') > -1) {
           console.log('父元素双击事件')
        }
	}
	
	// 子元素单击事件
	showPtzSpeed() {
		console.log('子元素单击事件')
	}
</script>
<style lang='less'>
.h5videowrapper {
	width: 500px;
	height: 300px;
	position: relative;
}
.common-icon {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0
}
</style>