Извлечь div без родителей при событии click

Question

Я пишу приложение, и мне нужно вернуть класс элемента, на который я нажал.

Проблема в том, что как только я нажимаю на элемент, я также получаю все его классы родителей.

код я использую, чтобы получить имена классов:

$('div').click(function() { 
    console.log($(this).attr("class")); 
}); 

Это образец элементов:

<div class="parent"> 
    <div class="child"> 
     Bla bla bla 
    </div> 
</div> 

После я нажимаю на .child div, он возвращает мне как .child и .parent имена классов.

Я полагаю, что должен быть простой способ исправить это, но после нескольких часов исследований я ничего не смог найти.

Answer 1

Вы должны предотвратить событие от прорывается к родительских элементов, используйте return false;

$('div').click(function (e) { 
    console.log($(this).attr("class")); 
    return false; // or e.stopPropagation(); 

});  

return false из обработчика событий JQuery это фактически то же самое, как вызов как e.preventDefault и e.stopPropagation на прошло jQuery.Event object. ........

Прочитано this отличный ответ для получения дополнительной информации.

С <div> есть теперь разница между e.stopPropagation() и return false, потому что <div> не имеет событие по умолчанию щелчок, как <a> или < button> делать.

Answer 2

Вам нужно предотвратить щелчок от пузырька до его родителя.

В родном Javascript, который вы бы назвали ev.stopPropagation(), но в обработчиках jQuery вы можете просто return false в обработчике событий и jQuery, а затем остальное.

См. JSFiddle для демонстрации.

Answer 3

Вы добавили событие click для всех элементов DIV, но вам нужно только одно.

$('div.child').click(function() { 
    console.log($(this).attr("class")); 
}); 

Answer 4

Не привязывайте к все<div> элементы на странице. Это довольно неэффективно.

Вместо этого ...

• делегации использовать событие с использованием .on(), связывание одного обработчика к body

• есть тест выбора делегации для 'div'

• затем получить .className от this что кликнули

---

$('body').on('click', 'div', function(e) { 
    console.log(this.className); 
    e.stopPropagation(); 
}); 

Итак, теперь у вас есть один обработчик, выполняющий работу для всех элементов <div>.

Если вы используете старую версию jQuery, используйте .delegate() вместо .on().

$('body').delegate('div', 'click', function(e) { 
    console.log(this.className); 
    e.stopPropagation(); 
}); 

---

EDIT: Обновлено использовать this вместо e.target как предложено @gdoron.

Answer 5

пытаются использовать return false

$('div').click(function() { 
    console.log($(this).attr("class")); 
    return false; 
}); 

Answer 6

Вы можете остановить распространение с помощью event.stopPropagation();

$('div').click(function (e) { 
    console.log($(this).attr("class")); 
    e.stopPropagation(); 
}); 

Answer 7

Это потому, что вы включили элементы. И функция выполняется дважды. После того, как в .child и один раз в .parent Try,

<div class="parent">BLA BLA</div> 
<div class="child">bla bla bla</div> 

И увидеть разницу.