CODEWITHSUNDEEP
javascriptjqueryevent-bubbling
MKP
MKP

Reputation: 117

Avoid bubbling in the nested elements

I have this html code:

<td class="myclass">
    <span>
        <span>xxxx</span>
    </span>
    <span>xxxx</span>
    <span>xxxx</span>
</td>

I'm attaching the click event to the elements with class "myclass" passing a fuction as callback. In that function I receive in event.target anyone of the elements but the element that I want to get is the td. ¿Can I avoid the bubbling in order to get always the td in the target or the event?

Big thanks

Upvotes: 1

Views: 52

Answers (1)

Rayon
Rayon

Reputation: 36609

Use this context inside handler-function

$('.myclass').on('click', function() {
  console.log(this);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<table>
  <tr>
    <td class="myclass">
      <span>
        <span>xxxx</span>
      </span>
      <span>xxxx</span>
      <span>xxxx</span>
    </td>
  </tr>
</table>

Or e.currentTarget

Identifies the current target for the event, as the event traverses the DOM. It always refers to the element the event handler has been attached to as opposed to event.target which identifies the element on which the event occurred.

$('.myclass').on('click', function(e) {
  console.log(e.currentTarget);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<table>
  <tr>
    <td class="myclass">
      <span>
        <span>xxxx</span>
      </span>
      <span>xxxx</span>
      <span>xxxx</span>
    </td>
  </tr>
</table>

Upvotes: 2

Related Questions