restrict event propagation in javascript

Question

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

score 3 · Accepted Answer · edited May 23 '17 at 11:47

3

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>

edited May 23 '17 at 11:47

Community

1
1

answered Apr 25 '11 at 14:31

Mark Coleman

40,542
9
81
101

the example you gave works well on Chrome but doesn't work in Firefox..it calls the tr onclick function there.. – Prashant Apr 25 '11 at 14:37
Checked and works perfectly....thanks a ton, you are The Savior......God Bless You... – Prashant Apr 25 '11 at 15:29

score 2 · Answer 2 · answered Apr 25 '11 at 14:30

2

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

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

answered Apr 25 '11 at 14:30

Robert

21,110
9
55
65

Hi Robert, thanks for replying.. This solution doesn't seem to be working well for Firefox.. – Prashant Apr 25 '11 at 14:46

restrict event propagation in javascript

2 Answers2

Linked