onClick events in nested html elements

Question

I have a structure like this:

<tr>
 <td onClick="doSomeStuff();">
  <a href="#" onClick="doOtherStuff(1);">1</a>
  <a href="#" onClick="doOtherStuff(2);">1</a>
 </td>
</tr>

My problem is that doSomeStuff() always executes, no matter that I am clicking on a <a href> element.

How I can fix this?

Thanks guys, I found answer in duplicate post - $('td > a').click(function(e) { e.stopPropagation(); }) — bel, Dec 21 '13 at 20:28
Make sure it works on all browsers - I've experienced different behaviour from IE before, which required another way of disabling "bubbling". You can read up on it under _Turning it off_ here: http://www.quirksmode.org/js/events_order.html — Jervelund, Dec 21 '13 at 20:44

score 16 · Answer 1 · answered Dec 21 '13 at 21:39

16

If you're using plain javascript. Try this

JS

function doOtherStuff(event,arg) {
        event.stopPropagation();
}

HTML

<tr>
     <td onClick="doSomeStuff();">
            <a href="#" onClick="doOtherStuff(event,1);">1</a>
            <a href="#" onClick="doOtherStuff(event,2);">1</a>
     </td>
</tr>

answered Dec 21 '13 at 21:39

Thant Sin Aung

682
2
10
20

what is event inside html? – Naveen Jun 04 '19 at 11:46

score 0 · Answer 2 · answered Dec 21 '13 at 20:38

By using JQuery

<tr>
 <td>
    <span class="td">
      welcome
      <a href="#" class="a">1</a>
      <a href="#" class="a">2</a>
    </span>
 </td>
</tr>

JQuery Code

$(function(){
    $(document).on("click",".td",function(){
        alert('td');
    });
    $(document).on("click",".td a",function(e){
        e.stopPropagation();
    });
    $(document).on("click",".a",function(){
        alert($(this).text());
    });
});

onClick events in nested html elements

2 Answers2

Linked