父级元素点击,遮盖了子元素的点击
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>