webew
Войти » Регистрация
 
JavaScript :: События

Предотвращение всплывания событий

31 января 2008, 11:01
В DOM & JavaScript события имеют свойство "всплывать". Например, если вы кликните по вложенному элементу, то обработчик клика вызовется сначала для этого элемента, а затем для всех родительских вплоть до document. Иногда "всплывание" мешает и его можно оборвать.

Поставим конкретную задачу:

Есть HTML-документ с DIV-ом. Необходимо, чтобы при клике на любую часть документа появлялось окно-предупреждение с текстом "Document". Если же клик пришелся на DIV, то текстом окна должен быть "DIV".

Решение:

1) Создаем HTML-элемент (приведен только актуальный код):

<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;
}

3) Добавим обработчики, в один из которых поставим функцию cancelBubbling:

addHandler(
      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
Добавить комментарий
© 2008—2017 webew.ru, связаться: x собака webew.ru
Сайт использует Flede и соответствует стандартам WAI-WCAG 1.0 на уровне A.
Rambler's Top100

Реклама: