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点击函数 - 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();
}

限制javascript中的事件传播

2 个答案: