限制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

从怪癖模式以及此答案中，这很可能是您想要处理内联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>

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();
}