Есть проблемы с пузырями событий и захвата событий на JavaScript и JQUERY Events. Ниже приведено подробное резюме двух проблем и их решений.
Пузыри событий - это процесс пузырьков от детей к узлам предка;
Захват событий - это как раз наоборот, и это процесс от узлов предка до детских узлов.
Приведите пример события jQuery Click:
Код заключается в следующем:
Кода -копия выглядит следующим образом:
<! Doctype html>
<meta charset = "utf-8">
<title> тест </title>
<голова>
<script src = "http://code.jquery.com/jquery-latest.js"> </script>
<script type = "text/javascript">
$ (function () {
$ ('#clickme'). Click (function () {
оповещение («Привет»);
});
$ ('body'). Click (function () {
блюд ('Baby');
});
});
</script>
</head>
<тело>
<div>
<button type = "button" id = "button2"> нажмите меня </button>
<button id = "clickme"> нажмите </button>
</div>
</body>
</html>
Феномен пузырьков событий: нажмите кнопку «id = clickme», и два всплывающих окна «Привет» и «Малыш» появятся один за другим.
Анализ: при нажатии на кнопку «id = clickme», событие нажатия, связанное с кнопкой и кнопкой, и кнопкой родительские элементы и кузов запускаются, поэтому появляются два поля одного за другим, и происходит так называемое явление пузырьков.
Феномен захвата событий: если вы нажмете на Div и кнопку, которая не связывает событие Click, появится диалоговое окно «Baby».
В реальных проектах мы хотим предотвратить пузырьки событий и захват событий.
Как предотвратить пузырьки событий:
Метод 1: вернуть False в текущем событии Click;
Кода -копия выглядит следующим образом:
$ ('#clickme'). Click (function () {
оповещение («Привет»);
вернуть ложь;
});
Метод 2:
Кода -копия выглядит следующим образом:
$ ('#clickme'). Нажмите (function (event) {
оповещение («Привет»);
var e = window.event || событие;
if (e.stoppropagation) {// Если предоставлен объект события, то это браузер, не связанный с ИМ
e.stoppropagation ();
}еще{
// IE-совместимый способ отменить пузырь событий
window.event.cancelbubble = true;
}
});
Кажется, что событие захвата не может быть заблокировано