Событие с щелчком дочернего элемента запускает событие родительского щелчка

Скажем, у вас есть такой код:

<html>
<head>
</head>
<body>
   <div id="parentDiv" onclick="alert('parentDiv');">
       <div id="childDiv" onclick="alert('childDiv');">
       </div>   
    </div>
</body>
</html>

Я не хочу запускать событие parentDiv click, когда я нажимаю на childDiv. Как я могу это сделать?

Обновление

Кроме того, какова последовательность выполнения этих двух событий?

Ответ 1

Вам нужно использовать event.stopPropagation()

Живая демонстрация

$('#parentDiv').click(function(event){
    event.stopPropagation();
    alert(event.target.id);
});

event.stopPropagation()

Описание: Предотвращает событие от пузырьков дерева DOM, не позволяя любым родительским обработчикам получать уведомление о событии.

Ответ 2

Без jQuery: DEMO

 <div id="parentDiv" onclick="alert('parentDiv');">
   <div id="childDiv" onclick="alert('childDiv');event.cancelBubble=true;">
     AAA
   </div>   
</div>

Ответ 3

Метод stopPropagation() останавливает пузырение события на родительские элементы, предотвращая уведомление родительских обработчиков о событии.

Вы можете использовать метод event.isPropagationStopped(), чтобы узнать, был ли этот метод когда-либо вызван (в этом объекте события).

Синтаксис:

Вот простой синтаксис для использования этого метода:

event.stopPropagation()

Пример:

$("div").click(function(event) {
    alert("This is : " + $(this).prop('id'));

    // Comment the following to see the difference
    event.stopPropagation();
});

Ответ 4

Нажмите событие Bubbles, теперь, что подразумевается под пузырьками, хорошая точка для запуска здесь. вы можете использовать event.stopPropagation(), если вы не хотите, чтобы это событие распространялось дальше.

Также хорошая ссылка для ссылки на MDN

Ответ 5

Я столкнулся с той же проблемой и решил ее этим методом. html:

<div id="parentDiv">
   <div id="childDiv">
     AAA
   </div>
    BBBB
</div>

JS:

$(document).ready(function(){
 $("#parentDiv").click(function(e){
   if(e.target.id=="childDiv"){
     childEvent();
   } else {
     parentEvent();
   }
 });
});

function childEvent(){
    alert("child event");
}

function parentEvent(){
    alert("paren event");
}