Остановка всплытия событий

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

Поведение события по умолчанию и всплытие событий

Существует ряд случаев, где желательно остановить поведение события по умолчанию. Например, может понадобиться запретить пользователю отправку формы, если некоторые поля не заполнены. То же самое относится к всплытию событий, и эта часть объясняет, как можно контролировать подобные ситуации.

Также как и с моделью событий и различиями между объектами событий, существует два способа обойти эту проблему, чтобы обеспечить поддержку IE и всех других браузеров. Созданный на основе предыдущего кода для получения ссылки на объект события следующий код содержит остановку поведения ссылки по умолчанию, возникающего при щелчке на ссылке:

addEvent(document.getElementById("stop-default"), "click", stopDefaultBehavior);function stopDefaultBehavior (evt) { var eventReference = (typeof evt !== "undefined")? evt : event; if (eventReference.preventDefault) { eventReference.preventDefault(); } else { eventReference.returnValue = false; }}

Этот подход использует так называемое обнаружение объекта для подтверждения, что метод действительно доступен, прежде чем его вызывать, что помогает предотвратить возможные ошибки. Метод preventDefault доступен во всех web-браузерах, кроме Internet Explorer, и он предотвращает выполнение действия по умолчанию для события.

Если этот метод не поддерживается, код задает для returnValue объекта глобального события значение false, тем самым останавливая поведение по умолчанию в Internet Explorer.

Рассмотрим следующую иерархию HTML:

<div> <ul> <li> <a href="http://www.opera.com/" id="stop-default">Opera</a> </li> <li> <a href="http://www.opera.com/products/dragonfly/" id="stop-default">Opera Dragonfly</a> </li> </ul> </div>

Предположим, что событие onclick используетcя для всех элементов a, элементов li и элемента ul. Событие onclick будет сначала вызывать обработчик событий ссылки, затем элементов списка, и, наконец, обработчик событий неупорядоченного списка.

Если пользователь щелкает на ссылке, то, скорее всего, не требуется вызывать никакие возможные обработчики событий для элемента предка li, но вместо этого просто позволить пользователю перейти на соответствующую страницу. Однако если пользователь щелкает на элементе li вне ссылки, можно использовать обработчик событий для элемента li, а также элемента ul.

Отметим, что при включении модели событий DOM level 2 и метода useCapture, т.е. при использовании перехвата событий, он будет начинаться с неупорядоченного списка, затем элемент списка, и, наконец, ссылка. Однако, так как перехват событий не доступен для выбора в Internet Explorer, такая функциональность очень редко используется в реальной практике.

Вот как надо писать код, чтобы остановить всплывание событий:

addEvent(document.getElementById("stop-default"), "click", cancelEventBubbling);function cancelEventBubbling (evt) { var eventReference = (typeof evt !== "undefined")? evt : event; if (eventReference.stopPropagation) { eventReference.stopPropagation(); } else { eventReference.cancelBubble = true; }}