На этом шаге мы рассмотрим использование заданного параметра функции.
Теперь у нас имеется возможность обратиться к объекту события через переменную event. Чтобы определить, где событие вступает в силу, можно использовать свойство event.target. Это свойство является частью прикладного интерфейса объектной модели документа (DOM API), но реализовано не во всех браузерах. В случае необходимости библиотека jQuery расширяет объект события, чтобы обеспечить доступность данного свойства во всех браузерах. С помощью свойства .target можно определить, какой элемент в дереве DOM первым должен принимать событие, то есть в случае события click фактический элемент, на котором выполнен щелчок. Помня о том, что ключевое слово this хранит ссылку на элемент DOM, обрабатывающий событие, мы можем написать следующую реализацию:
$(document).ready(function() {
$('#switcher').click(function(event) {
if (event.target == this)
$('#switcher .button').toggleClass('hidden');
});
});
Рис.1. Исключение кнопок из области переключения
Полный текст этого примера можно взять здесь.Такой подход гарантирует, что действие будет выполняться только в случае щелчка на самом элементе <div id="switcher">, а не на одном из его подэлементов. Теперь щелчок на кнопке не будет приводить к свертыванию переключателя стилей, а щелчок в области фона переключателя будет. В свою очередь, щелчок на метке, элемент <h3>, не будет вызывать никакой реакции, потому что она также является подэлементом. Для достижения наших целей вместо выполнения подобной проверки мы можем изменить обработчики событий кнопок.
На следующем шаге мы рассмотрим остановку распространения события.
