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

Также как и с моделью событий и различиями между объектами событий, существует два способа обойти эту проблему, чтобы обеспечить поддержку 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;

}

}

Законченный пример обработки событий

Здесь собран вместе пример страницы, демонстрирующий добавление обработчика событий и предотвращение действия по умолчанию для этого события, в зависимости от определенного критерия. Обработчик событий проверяет, разрешено ли отправить форму, в зависимости от того, заполнил ли пользователь все поля или нет. Код JavaScript имеет следующий вид:

addEvent(window, "load", function () {

var contactForm = document.getElementById("contact-form");

if (contactForm) {

addEvent(contactForm, "submit", function (evt) {

var firstName = document.getElementById("first-name");

var lastName = document.getElementById("last-name");

if (firstName && lastName) {

if (firstName.value.length === 0 || lastName.value.length === 0) {

alert("You have to fill in all fields, please.");

evt.preventDefault();

}

}

});

}

});