[Функция] event.stopPropagation()
Раздел "Events"
Данный метод предотвращает всплытие события по элементам структуры DOM, предотвращая при этом срабатывания обработчиков события любых родительских элементов.
Для проверки был ли запущен метод event.stopPropagation() существует метод .isPropagationStopped()
Равным образом данный метод работает и для пользовательских событий, запускаемых с помощью метода trigger().
Учтите, что данный метод не предотвращает срабатывание других обработчиков для этих же элементов. Используйте метод event.isPropagationStopped() для определения был ли применен метод event.stopPropagation() к какому-либо событию объекту.
Пример:
Уничтожить всплытие для события click
"jQuery"
$(".parent").click(function(event){
alert(1)
// do something
});
$(".child").click(function(event){
event.stopPropagation();
alert(2)
// do something
});
"HTML"
<div class="parent">
<div class="child">
</div>
</div>
"CSS"
div.parent {background-color: #eef; width:200px;height:200px;}
div div { padding: 20px; background-color: red; width:100px;height:100px;}
"Живой пример jQuery"
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link href="http://test-drupal.ru/themes/slyweb/css/jqueryiframe.css"
rel="stylesheet" type="text/css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".parent").click(function(event){
alert(1)
// do something
});
$(".child").click(function(event){
event.stopPropagation();
alert(2)
// do something
});
});
</script>
</head>
<body class="iframe">
<div class="parent">
<div class="child">
</div>
</div>
</body>
</html>
<style>
div.parent {background-color: #eef; width:200px;height:200px;}
div div { padding: 20px; background-color: red; width:100px;height:100px;}
</style>
Версия jQuery 1.4.2
Документ создан 2010-08-21
