父级元素点击，遮盖了子元素的点击

最新推荐文章于 2023-09-30 22:21:08 发布

weixin_34087503

最新推荐文章于 2023-09-30 22:21:08 发布

阅读量832

点赞数

文章标签： javascript ViewUI

本文通过两个具体场景展示了如何在HTML与JavaScript中有效利用event.cancelBubble属性来阻止事件冒泡，以及如何解决因父元素事件处理导致子元素事件被覆盖的问题。

1.场景1：组织消息上传，点击父元素，禁止子元素的事件执行

event.cancelBubble=true 的使用

<html>
<body>
<table border="1" width="26%" id="tableA" onclick="alert('tableA')">
<tr onclick="tableA_rowA_click()">
   <td width="106">一般</td>
</tr>
<tr onclick="tableA_rowB_click()">
   <td width="106">阻止消息上传</td>
</tr>
</table>

</body>
</html>
<script language="javascript">
<!--
function tableA_rowA_click(){
　　alert('1');

　　//结果，alert 出：
　　tableA 和 1
　　*/

}

function tableA_rowB_click(){ 　　
　　alert('2'); 　　
　　event.cancelBubble=true;
　　//结果，alert 出：
　　tableA 

　　*/

}
//-->
</script>

如图

$('.orderDetail-table input').on('click',function(e){
     e.stopPropagation();
});

2.场景2，tr加了点击事件，覆盖了checkbox的点击选中，

解决方式：在需要加事件的被覆子元素上加事件

<tr class="onhover" onclick="toggleCheckedBox(@p.id);">
    <td><input id="checkedbox_@p.id" type="checkbox" name="payid" value="@p.id" onclick="toggleCheckedBox(@p.id);"></td>
    <td>222</td>
    <td>2222</td>
</tr>