Избегайте барботирование в вложенных элементах

Question

у меня есть этот HTML код:

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

Я прилагаю событие щелчка к элементам с классом «MyClass», проходящей фикцию, как обратный вызов. В этой функции я получаю в event.target любой из элементов, но элемент, который я хочу получить, это td. ¿Могу ли я избежать пузырьков, чтобы всегда получать td в цель или событие?

Большое спасибо

Answer 1

Используйте this контекст внутри 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>

Илиe.currentTarget

Идентифицирует текущую цель для события, так как событие пересекает DOM. Он всегда относится к элементу, к которому привязан обработчик событий, а не к event.target, который идентифицирует элемент, на котором произошло событие.

$('.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>