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

Community · Accepted Answer · 2017-05-23 11:47:42Z

4

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, 2017 at 11:47

CommunityBot

11 silver badge

answered Apr 25, 2011 at 14:31

Mark Coleman

40.9k9 gold badges84 silver badges101 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Prashant Over a year ago

the example you gave works well on Chrome but doesn't work in Firefox..it calls the tr onclick function there..

Prashant Over a year ago

Checked and works perfectly....thanks a ton, you are The Savior......God Bless You...

Robert · Accepted Answer · 2011-04-25 14:30:08Z

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, 2011 at 14:30

Robert

21.4k9 gold badges57 silver badges67 bronze badges

1 Comment

Prashant Over a year ago

Hi Robert, thanks for replying.. This solution doesn't seem to be working well for Firefox..

Collectives™ on Stack Overflow

restrict event propagation in javascript

2 Answers 2

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related