Предотвращение всплывания событий
31 января 2008, 14:01
Автор: Александр Бурцев [bur]
В DOM & JavaScript события имеют свойство "всплывать". Например, если вы кликните по вложенному элементу, то обработчик клика вызовется сначала для этого элемента, а затем для всех родительских вплоть до document. Иногда "всплывание" мешает и его можно оборвать.
2) Запишем функции для добавления обработчиков событий и для обрыва всплывания событий.
3) Добавим обработчики, в один из которых поставим функцию cancelBubbling:
4) Готово!
Функция cancelBubbling работает со свойством cancelBubble объекта event, которое и запрещает всплывание событий.
// Все права на статью JavaScript::Предотвращение всплывания событий принадлежат сайту 2007.fastcoder.ru
Поставим конкретную задачу:
Есть HTML-документ с DIV-ом. Необходимо, чтобы при клике на любую часть документа появлялось окно-предупреждение с текстом "Document". Если же клик пришелся на DIV, то текстом окна должен быть "DIV".Решение:
1) Создаем HTML-элемент (приведен только актуальный код):<body>
<div id="divId">DIV</div>
<body>
<div id="divId">DIV</div>
<body>
2) Запишем функции для добавления обработчиков событий и для обрыва всплывания событий.
function addHandler(object, event, handler, useCapture) {
if (object.addEventListener) {
object.addEventListener(event, handler, useCapture ? useCapture : false);
} else if (object.attachEvent) {
object.attachEvent('on' + event, handler);
} else alert("Add handler is not supported");
}
function cancelBubbling(evt) {
evt = evt || window.event;
evt.cancelBubble = true;
}
if (object.addEventListener) {
object.addEventListener(event, handler, useCapture ? useCapture : false);
} else if (object.attachEvent) {
object.attachEvent('on' + event, handler);
} else alert("Add handler is not supported");
}
function cancelBubbling(evt) {
evt = evt || window.event;
evt.cancelBubble = true;
}
3) Добавим обработчики, в один из которых поставим функцию cancelBubbling:
addHandler(
document,
"click",
function() {alert("Document");}
);
addHandler(
document.getElementById("divId"),
"click",
function(event) {
alert("DIV");
// Запрещаем всплывание событий после DIV-а
cancelBubbling(event);
}
);
document,
"click",
function() {alert("Document");}
);
addHandler(
document.getElementById("divId"),
"click",
function(event) {
alert("DIV");
// Запрещаем всплывание событий после DIV-а
cancelBubbling(event);
}
);
4) Готово!
Функция cancelBubbling работает со свойством cancelBubble объекта event, которое и запрещает всплывание событий.
// Все права на статью JavaScript::Предотвращение всплывания событий принадлежат сайту 2007.fastcoder.ru
