How can I prevent an event from bubbling up to parent in javascript?

Eg.

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

When I click on "Delete" anchor tag, first the my_a_click() function gets called, and then the parent tr onclick function - my_tr_click() - gets called. This, I believe, is called event propagation.

How can I stop that my_tr_click() function from getting called when I click on the child anchor tag?

Please help me out..

Thanks

How can I prevent an event from bubbling up to parent in javascript?

Eg.

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

When I click on "Delete" anchor tag, first the my_a_click() function gets called, and then the parent tr onclick function - my_tr_click() - gets called. This, I believe, is called event propagation.

How can I stop that my_tr_click() function from getting called when I click on the child anchor tag?

Please help me out..

Thanks

• javascript
• event-handling

2 Answers 2

From quirks mode and also this answer this is most likely what you want to do to handle your inline onclick().

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

And adjust your markup:

<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

tested in chrome, firefox 4 and IE9.

With all that being said, if jQuery is an option it would make things a lot easier.

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

and

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

I think you may be interested in http://www.quirksmode/js/introevents.html

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