На этом шаге мы рассмотрим метод, который используется для остановки процесса всплытия.

    Объект события предоставляет метод .stopPropagation(), с помощью которого можно полностью прервать процесс всплытия события. Подобно свойству .target этот метод является обычным методом JavaScript, но он определен не во всех браузерах. Однако если регистрация обработчика события производится с помощью библиотеки jQuery, мы можем использовать его без всякой опаски.

    Удалим только что добавленную проверку event.target == this, но добавим следующие строки в обработчик события click кнопок:

 $(document).ready(function() {
   $('#switcher .button').click(function(event) {
     $('body').removeClass();
     if (this.id == 'switcher-narrow') {
       $('body').addClass('narrow');
     }
     else if (this.id == 'switcher-large') {
       $('body').addClass('large');
     }
     
     $('#switcher .button').removeClass('selected');
     $(this).addClass('selected');
     event.stopPropagation();
   });

   $('#switcher').click(function() {
       $('#switcher .button').toggleClass('hidden');
   });
 });

Рис.1. Исключение кнопок из области переключения

    Как и прежде, чтобы получить доступ к объекту события, мы передаем дополнительный параметр функции, которая будет играть роль обработчика события click. Затем мы просто вызываем метод event. stopPropagation(), чтобы предотвратить возможность обработки события любыми другими элементами дерева DOM. Теперь щелчки на кнопках будут обрабатываться кнопками и только кнопками; щелчки на любых других местах в пределах переключателя стилей будут приводить к его сворачиванию или разворачиванию.

    На следующем шаге мы рассмотрим действия по умолчанию.

Предыдущий шаг Содержание Следующий шаг