Как щелкнуть() нажал только DIV, не содержащий DIV?

Question

<div id="firstDiv" style="width:1000px;height:600px;"> 
    <div id="secondDiv" style="width:200px;height:200px;"></div> 
</div> 

У обоих DIV есть события click. Когда я нажимаю secondDiv, событие click-event для firstDiv также запускается (я думаю, это логично, так как я также щелкнул в границах firstDiv). Тем не менее, я хочу только запустить событие click для DIV, которое я на самом деле нажал на кнопку мыши.

Как это сделать?

Answer 1

На внутреннем сНе оный:

$('#secondDiv').click(function(e){e.stopPropagation();}); 

.stopPropagation() предотвратит событие щелчка от бурлит от внутренних дел до родительского DIV или любого другого предка.

Answer 2

Элементы DOM по умолчанию активируют события. Вы можете остановить с помощью stopPropagation

$('#secondDiv').on('click', function(e){ 
    e.stopPropagation(); 
}); 

Answer 3

Вы можете просто сделать это -

$('#secondDiv').click(function(event) { 
    // do your stuff 
    return false; 
}); 

return false; является эквивалентом event.stopPropagation() и event.preventDefault()

Answer 4

Вы можете использовать для этого event.stopPropagation() барботажа. Что-то вроде этого:

$("secondDiv").click(function(event) { 
    event.stopPropagation(); 
    //Write your logic here 
}); 

Для получения дополнительной информации по этому вопросу обратитесь к документации HERE

Answer 5

Вы хотите использовать event.stopPropagation(), который позволит предотвратить событие от барботирования до родительских элементов (в вашем случае). preventDefault выглядит многообещающим, но на самом деле он предотвращает действия по умолчанию - не пузырится.

$("#firstDiv").click(function() { 
    alert("Div One"); 
}); 

$("#secondDiv").click(function(e) { 
    e.stopPropagation(); 
    alert("Div Two"); 
}); 

Демонстрация обоих here.