Механизм пузыря JS относится к тому, что элемент определяет событие A, такое как событие Click.
Как показано в следующем примере:
Кода -копия выглядит следующим образом:
<html>
<script type = "text/javascript" src = "jquery-1.7.1.js"> </script>
<Скрипт>
функция ilertdouble (e) {
оповещение ('InnerDouble');
Stopbubble (e);
}
Функция ialertthree (e) {
оповещение ('innerthree');
Stopbubbledouble (e);
}
функция stopbubble (e) {
var evt = e || window.event;
evt.stoppropagation? evt.stoppropagation () :( evt.cancelbubble = true); // Остановить пузырьки от разбухания;
}
функция stopbubbledouble (e) {
var evt = e || window.event;
evt.stoppropagation? evt.stoppropagation () :( evt.cancelbubble = true); // Остановить пузырьки от разбухания;
evt.preventdefault (); // заблокировать поведение браузера по умолчанию, чтобы ссылка не прыгнула
}
$ (function () {
// Метод 1
//$('#jquerytest').click(function(Event) {
// alert ('innerfour');
// event.stoppropagation ();
// event.preventDefault ();
//});
// Метод 2
$ ('#jQueryTest'). Click (function () {
оповещение ('innerfour');
вернуть ложь;
});
});
</script>
<div onclick = "alert ('без');"> без
<div onclick = "alert ('Middle');"> Средний
<div onclick = "alert ('inner');"> inner </div>
<div onclick = "ialertdouble (event)"> innerdouble </div>
<p> <a href = 'http: //www.baidu.com' onclick = "ialertthree (event)"> innerthree </a> </p>
<p id = 'jquerytest'> <a href = 'http: //www.baidu.com'> innerfour </a> </p>
</div>
</div>
</html>
Когда вы нажимаете на внутреннюю, «внутреннюю», «средний» и «без», появятся по очереди. Это пузырь событий.
Интуитивно говоря, это так, потому что внутренняя область находится в родительском узле.
На самом деле, много раз мы не хотим, чтобы события пузырились, потому что это вызовет несколько событий одновременно.
Далее: давайте нажимаем на Innerduble. Вы обнаружите, что она не пузырится, потому что она назвала метод Stopbubble () в вызываемом методе ialertdouble ().
Но если это ссылка, мы обнаружим, что она также предотвратит пузырьки, но она прыгнет, что является поведением браузера по умолчанию. Он должен быть заблокирован с помощью метода предотвращения (). Для получения подробной информации вы можете проверить ialertthree ().
В настоящее время основные люди используют jQuery для привязки событий клика, что намного проще.
Мы можем передать событие параметра при нажатии на событие, а затем напрямую
event.stoppropagation ();
event.preventdefault (); // Для этого не требуется ссылка.
Вот и все.
Структура хороша, но на самом деле есть более простая.
[См. Подробный код выше, не забудьте загрузить jQuery.js. 】
На самом деле, вы также можете добавить суждения в каждое событие клика:
Кода -копия выглядит следующим образом:
$ ('#id'). Click (function (event) {
if (event.target == это) {
// что -нибудь делай
}
})
Анализ: Событие переменной в обработчике событий сохраняет объект события. Свойство Event.Target содержит целевой элемент события. Это свойство указано в API DOM, но не реализовано всеми браузерами. JQuery делает необходимые расширения для этого объекта события, чтобы это свойство было использовано в любом браузере. С. Более того, мы знаем, что это относится к элементу DOM, который обрабатывает события, поэтому мы можем написать приведенный выше код.
Тем не менее, рекомендуется использовать return false, если jQuery связывает события.