bootstrap 非原生checkbox 导致上级tr 点击两次的问题 真tm坑 研究了好久

<style>
input[type=checkbox] + .lbl::before{
	content:"N";
	border:1px solid red;
}
input[type=checkbox]:checked + .lbl::before{
	content:"Y";
	border:1px solid red;
}
input[type=checkbox]{
	/*display:none;不占口空间，无法点击*/
	/*visibility:none;占空间，但点击无效*/ 
    opacity: 0;
    position: absolute;/*脱离文档流 使checkbox 和要点击的位置一致 */;
   
}



</style>

<table border="1">
<tr οnclick="console.log('tr click');">
	<td>
		
<span οnclick="console.log('lbl click')">
	使用span包裹 事件冒泡 checkbox click(点中的是checkbox就有这个事件点中的是label就没) > lbl click >tr click <input type="checkbox" οnclick="console.log('checkbox click')"/>
	<span class="lbl"  οnclick="console.log('span click')"></span>
</span>


	</td>

</tr>
<tr οnclick="console.log('tr click');">
	<td>
		
<label οnclick="console.log('lbl click')">
	使用label包裹 事件冒泡 点中的是checkbox就正常往上冒泡:checkbox click> lbl click >tr click  ,点的是label:除了正常的 lbl click>tr click    ,还会 lbl click> label里的第一个input click >lbl click >tr click <font color=red>所以tr被点击了两次</font><input type="checkbox" οnclick="console.log('checkbox click')"/>
	<span class="lbl"  οnclick="console.log('span click')"></span>
</label>

	</td>
</tr>
</table>

当时 是做一个，点击了<tr> 加上一个选中的背景色的功能，点了两次就  导致加上了又取消， 浪费了很多事件，终于搞明白了!!!!

1.阻止冒泡:

在checkbox 上加  οnclick="event.stopPropagation();" 

2.tr click 中  判断 event.target ( 事件来源 )