Как выбрать триггер событий в JQuery?

Question

Вопрос:

HTML:

<div id="main"> 
    hello main 
    <div id="sub"> hello sub </div> 
</div> 

JS:

$("#main").on("click", function() {alert("main");}); 
$("#sub").on("click", function() {alert("sub");}); 

Здесь, когда я нажимаю "привет суб" текст, два предупреждения -SUB а главное - запускаются в то время как я хочу чтобы увидеть только «под». Как я могу достичь этого?

Answer 1

$("#sub").on("click", function(e) { //pass in event as "e" 
    e.stopPropagation(); //stop propagation from bubbling to the next element. 
    alert("sub"); 
}); 

Answer 2

Вы можете использовать event.stopPropagation в sub обработчика событий, чтобы остановить распространение события вверх по дереву DOM иерархии.

Live Demo

$("#main").on("click", function() {alert("main");}); 
$("#sub").on("click", function(event) {event.stopPropagation();alert("sub");}); 

Answer 3

В дополнение к остановке распространения на #sub элемента, вы могли бы вместо того, чтобы проверить внутри обработчика событий для #main, если щелкнуть мышью элемент был фактически #main, если это более удобно:

$("#main").on("click", function(e) { 
    if (e.target === this) alert("main"); 
}); 

FIDDLE

Answer 4

Предыдущие ответы на все работают, но мой предпочтительный способ - проверить для дочернего узла, не связанного с обработкой, в обработчике события узла контейнера, чтобы избежать различных ошибок. event.stopPropgation() препятствует тому, чтобы контейнеры более высокого уровня видели событие, которое часто оказывается необходимым. Проверка e.target завершится с ошибкой, если вложенный элемент под суб, который щелкнут напрямую, а не суб. Такой подход позволяет избежать оба проблем:

$(".main").on("click", function (event) { 
    if($(event.target).closest(".sub").length){ 
     return; 
    } 
    alert("main")  
}); 
$(".sub").on("click", function (event) { 
    alert("sub"); 
}); 

скрипки ж/пример контейнера верхнего уровня, который имеет независимый обработчик событий.

http://jsfiddle.net/rH5vj/1/