Скажем, у вас есть такой код:
<html>
<head>
</head>
<body>
<div id="parentDiv" onclick="alert('parentDiv');">
<div id="childDiv" onclick="alert('childDiv');">
</div>
</div>
</body>
</html>
Я не хочу запускать событие parentDiv click, когда я нажимаю на childDiv. Как я могу это сделать?
Обновление
Кроме того, какова последовательность выполнения этих двух событий?
Вам нужно использовать event.stopPropagation()
$('#parentDiv').click(function(event){
event.stopPropagation();
alert(event.target.id);
});
Описание: Предотвращает событие от пузырьков дерева DOM, не позволяя любым родительским обработчикам получать уведомление о событии.
Без jQuery: DEMO
<div id="parentDiv" onclick="alert('parentDiv');">
<div id="childDiv" onclick="alert('childDiv');event.cancelBubble=true;">
AAA
</div>
</div>
Метод stopPropagation() останавливает пузырение события на родительские элементы, предотвращая уведомление родительских обработчиков о событии.
Вы можете использовать метод event.isPropagationStopped(), чтобы узнать, был ли этот метод когда-либо вызван (в этом объекте события).
Синтаксис:
Вот простой синтаксис для использования этого метода:
event.stopPropagation()
Пример:
$("div").click(function(event) {
alert("This is : " + $(this).prop('id'));
// Comment the following to see the difference
event.stopPropagation();
});
Нажмите событие Bubbles, теперь, что подразумевается под пузырьками, хорошая точка для запуска здесь.
вы можете использовать event.stopPropagation(), если вы не хотите, чтобы это событие распространялось дальше.
Также хорошая ссылка для ссылки на MDN
Я столкнулся с той же проблемой и решил ее этим методом. 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");
}