нужен конечный родитель цели клика

Question

вот вопрос о связывании событий кликов с jQuery, который я пытаюсь понять.

Скажем, у меня есть элемент блока, к которому я привязываю клик, с тегом абзаца внутри него.

<div id="testClick" style="width:200px; height:100px'>
     <p>test click</p>
</div>

и я привязываю щелчок к элементу div:

$('#testClick').bind('click', function(e){ 
    //with parent div (via e.target), do something 
});

сейчас, если я нажму на текст внутри тега p, e.target = элемент p, и если я нажмув div (вокруг, а не в тексте) e.target = элемент div.Таким образом, e.target = объект, по которому щелкнули - то есть событие также связано с любыми дочерними элементами указанного элемента.

Это ожидаемо, но мне нужно работать с родительским div.и использование e.target не является надежным способом получения ссылки на div, потому что в зависимости от того, где внутри div происходит щелчок, e.target возвращает другой элемент.Если я использую e.target.parent для получения ссылки на div, то это происходит сбой при щелчке в div вокруг текста.

Нет ли простого способа заставить e.target всегда и только возвращатьточный элемент, с которым изначально был связан клик?

(например, в ActionScript есть свойство "mouseChildren", которое предотвращает запуск событий для дочерних элементов связанных элементов)

(рассмотрите весь приведенный выше псевдокод)

Answer 1

this будет ссылаться на элемент, к которому привязан обработчик.

$('#testClick').bind('click', function(e){ 
    alert( this.id ); 
});

ДЕМО: http://jsfiddle.net/yX499/

---

Что происходит, так это то, что событие всплывает от самого глубокого элемента, щелкнувшего весь путь до корня документа.

Если по пути встречается элемент с обработчиком, привязанным к типу произошедшего события, он вызывает этот обработчик.

e.target всегда будет ссылаться на этот глубоко вложенный элемент, но this будет ссылаться на элемент, с которым связан обработчик, поэтому, если событие находит 2 элемента с соответствующим обработчиком, связанным на пути к корню, e.target не изменится в 2 обработчиках, но this будет отличаться в зависимости от связанного элемента.

Answer 2

Используйте this.jQuery вызывает ваш обратный вызов с this, установленным для вашего удобства:

$('#testClick').bind('click', function(e){ 
    $(this).doStuff();
});