HTML结构:
<td id="td" >
<div id="div">
<a id="a" >最里层标签</a>
</div>
</td>
首先借助html来帮助我们理顺思路,我们在td标签中绑定了一个onmouseover事件,这时,当我们点击a标签时,事件进入捕获阶段,传播路径如下:
Document → html → body → td#td → div#div → a#a
然后是冒泡并且执行处理方法的阶段:
a#a(触发td事件) → div#div(触发td事件) → td#td(触发td事件) → body → html → Document
思路清晰之后,其实也很简单,在你需要监听的子标签中阻止事件冒泡,比如你要在a标签不触发td的onmouseover事件
$("#a").addEventListener('mouseover', function(e) {
e.stopPropagation(); //终止事件在传播过程的捕获、目标处理或起泡阶段进一步传播
});