限制javascript中的事件传播

Question

如何防止事件在 javascript 中冒泡到父级？

例如。

<tr id="my_tr" onclick="javascript:my_tr_click();">
   <td>
      <a id="my_atag" href="javascript:void(0);" onclick="javascript:my_a_click();">Delete</a>
   <td>
</tr>

当我单击“删除”锚标记时，首先调用 my_a_click() 函数，然后调用父 tr onclick 函数 - my_tr_click() - .我相信这就是所谓的事件传播。

当我单击子锚标记时，如何阻止 my_tr_click() 函数被调用？

请帮帮我..

谢谢

Answer 1

来自quirks mode 和这个answer 这很可能是您想要处理内联onclick() 的方法。

function my_a_click(e) {
    e.cancelBubble = true;
    if (e.stopPropagation) e.stopPropagation();
}

并调整您的标记：

<a id="my_atag" href="javascript:void(0);" onclick="var event = arguments[0] || window.event; my_a_click(event);">Delete</a>

Working example on jsfiddle

在 chrome、firefox 4 和 IE9 中测试。

话虽如此，如果 jQuery 是一个选项，它会让事情变得很多更容易。

$("#my_atag").click(function(e){
  e.stopPropagation();
});

和

<a id="my_atag" href="javascript:void(0);">Delete</a>

Answer 2

我想你可能对http://www.quirksmode.org/js/introevents.html感兴趣

something.onclick = function (e) {
    e.cancelBubble = true;
    if (e.stopPropagation) e.stopPropagation();
}