logofree制作网站,电子商务网站总体规划的内容,王占山,建设银行e房通网站解决子元素的click事件会触发父元素的dbclick事件 方案一#xff1a;方案二#xff1a;方案三#xff1a;方案一方案二综合案例如下#xff1a; 方案一#xff1a;
错误思路#xff1a;通过阻止子元素click事件的冒泡#xff0c;阻止父元素的dbclick 正确思路#xff… 解决子元素的click事件会触发父元素的dbclick事件 方案一方案二方案三方案一方案二综合案例如下 方案一
错误思路通过阻止子元素click事件的冒泡阻止父元素的dbclick 正确思路要用子元素的dbclick事件的冒泡去阻止父元素的dbclick子元素的dbclick方法为空
dblclick.stop{}方案二
通过taget来确定只有target点击到父元素的时候采取执行父元素的dbclick方法下面的例子中因为子元素覆盖到了父元素上所以采用$event.target.parentElement来确定父元素
方案三
给父元素添加.self前提是子元素未100%覆盖父元素
div idh5Id classh5videowrapper dblclick.selfchangeFullScreendiv classreduce-icon clickshowPtzSpeed()/div
/div方案一方案二综合案例如下
div idh5Id classh5videowrapper dblclickchangeFullScreendiv classcommon-icon reduce-icon clickshowPtzSpeed() dblclick.stop{}img :srcspeedIcon alt云台速度/div
/divscript// 父元素的双击事件changeFullScreen($event) {if ($event.target.parentElement.classList.value.indexOf(h5videowrapper) -1) {console.log(父元素双击事件)}}// 子元素单击事件showPtzSpeed() {console.log(子元素单击事件)}
/script
style langless
.h5videowrapper {width: 500px;height: 300px;position: relative;
}
.common-icon {position: absolute;top: 0;left: 0;right: 0;bottom: 0
}
/style
