限制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()函数从调用当我点击子锚标记?

Please help me out.

谢谢

Answer 1

从quirks模式和这个答案，这是最有可能的你想做的，以处理您的内联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();
}