错误思路:通过阻止子元素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>