How to disable onclick function from child selector using javascript

Question

How can i make sure that onclick events only fires by clicking on td not on the span ?

<td style="cursor: pointer;" onclick="getDetails(13,3)">
   <span class="responsiveExpander"></span>
    TEST
</td>


function getDetails(table_id,id)
{
   alert(table_id + id);
}

Also check [this thread](https://stackoverflow.com/questions/4616694/what-is-event-bubbling-and-capturing) — sabithpocker, Sep 07 '17 at 12:50

score 3 · Accepted Answer · answered Sep 07 '17 at 12:48

You have to add an event listener to the inner child and cancel the propagation of the event.

In plain JS something like

document.getElementById('inner').addEventListner('click',function (e){
   e.stopPropagation();
});

is sufficient. Note that jQuery provides the same facility:

$(".inner-div").click(function(event){
    event.stopPropagation();
});

or

$(".inner-inner").on('click',function(event){
    event.stopPropagation();
});

score 2 · Answer 2 · answered Sep 07 '17 at 12:49

Assuming you want to prevent clicks on all sub-elements, pass the event to getDetails and have it see if event.currentTarget is the same as event.target.

function getDetails(event, table_id, id) {
   if (event.currentTarget !== event.target) {
     return; // clicked a sub-element
   }
   alert(table_id + id);
}

span {
 color: red;
}

<table>
<tr>
<td style="cursor: pointer;" onclick="getDetails(event, 13,3)">
   <span class="responsiveExpander">SHOULD NOT ALERT</span>
    TEST
</td>
</tr>
</table>

Wow,what a nice way to handle this sort of stuff. – Khirad Zahra Sep 07 '17 at 12:53 — Khirad Zahra, Sep 07 '17 at 12:53

score 0 · Answer 3 · answered Sep 07 '17 at 13:09

You may do as follows;

data.addEventListener("click", function(e){
                                 e.target === this && console.log("td clicked");
                               });

td {border: red solid 2px;}
span{color: white; background-color: black}

<table>
  <tr>
    <td id="data" style="cursor: pointer">
      <span>SPAN:</span> TEST
    </td>
  </tr>
</table>

How to disable onclick function from child selector using javascript

3 Answers3