云南省网站建设收费调查报告论文/郑州网站关键词优化外包
解决子元素的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>