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

解决子元素的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>

相关推荐

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-01-19 21:10:02       94 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-01-19 21:10:02       101 阅读
  3. 在Django里面运行非项目文件

    2024-01-19 21:10:02       82 阅读
  4. Python语言-面向对象

    2024-01-19 21:10:02       91 阅读

热门阅读

  1. openssl3.2 - 官方demo学习 - mac - poly1305.c

    2024-01-19 21:10:02       42 阅读
  2. 面试经典题---15.三数之和

    2024-01-19 21:10:02       53 阅读
  3. Android 优化广告图加载

    2024-01-19 21:10:02       60 阅读
  4. 【Python 千题 —— 基础篇】元组的合并

    2024-01-19 21:10:02       58 阅读
  5. IP地址及子网掩码

    2024-01-19 21:10:02       50 阅读
  6. HCIP-7

    HCIP-7

    2024-01-19 21:10:02      48 阅读
  7. 使用 Apache POI XDGF 读取 vsdx 文件

    2024-01-19 21:10:02       49 阅读
  8. MySQL 8.0 架构 之错误日志文件(Error Log)(1)

    2024-01-19 21:10:02       41 阅读
  9. 小程序中使用瀑布流组件的记录

    2024-01-19 21:10:02       61 阅读
  10. 大游戏并发使用什么阿里云服务器配置?

    2024-01-19 21:10:02       61 阅读