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

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>

 

posted @ 2017-05-20 16:15  君子笑而不语  阅读(2163)  评论(0编辑  收藏  举报