Будьте в курсе последних событий, подпишитесь на обновления сайта

Отмена действий браузера по умолчанию

Отмена действий браузера по умолчанию

Здравствуйте! В этом уроке я хотел бы рассмотреть такой вопрос, как отмена действий браузера по умолчанию. Дело в том, что  есть некоторые события в браузере за которыми уже закреплены стандартные обработчики и вот они могут срабатывать  вместе с вашими обработчиками, а как сделать так, чтобы эти обработчики по умолчанию не срабатывали. Вот об этом и читайте дальше.

Перечислю основные события браузера по умолчанию:

  • Клик по ссылке  — вы переходите на новую страницу, адрес которой указан в атрибуте href.
  • Нажатие на кнопку «отправить» в форме –   отсылает данные формы на сервер.
  • Двойной клик на тексте –  при этом текст будет выделен.

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


Отмена действия браузера

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

  • Главный способ – это воспользоваться объектом события, который передается в функцию обработчик события ( я писал орб этом здесь). Для отмены действия браузера используется  метод event.preventDefault().
  • В случае назначения  обработчика  через onсобытие (а не через addEventListener), то  вернуть false из  функции обработчика.

В примере при клике по ссылке переход не произойдет:

<a href="/" onclick="return false">Нажми здесь</a>
или
<a href="/" onclick="event.preventDefault()">здесь</a>

Обычно значение, которое вернет обработчик события, как правило игнорируется.

Единственное исключение – это return false из обработчика, назначенного через onсобытие, но это уже как правило не используется.

Пример: меню

Рассмотрим пример, когда нужно создать меню, например такое:

<ul id="menu" class="menu">
  <li><a href="/php">PHP</a></li>
  <li><a href="/html">HTML</a></li>
  <li><a href="/javascript">JavaScript</a></li>
  <li><a href="/flash">Flash</a></li>
</ul>

HTML-разметка сверстана так, что все элементы меню являются не кнопками, а ссылками, то есть тегами <a>.

Читайте также  События клавиатуры: keyup, keydown, keypress

Это потому, что некоторые посетители очень любят сочетание «правый клик – открыть в новом окне».  Да, можно использовать и <button> и <span>, но тогда правый клик не  будет работать и этот факт  их огорчает.

Поэтому в разметке мы используем именно <a>, но событие клик будет обрабатываться полностью в JavaScript, а стандартное действие браузера (переход по ссылке) – надо будет  отменить.

Например, как вариант:

menu.onclick = function(event) {
  if (event.target.nodeName != 'A') return;
  event.preventDefault();
  var href = event.target.getAttribute('href');
  alert( href ); // может быть подгрузка с сервера

  return false; // отменить переход по url
};

В конце return false, иначе браузер перейдёт по адресу указанному  в атрибуте  href.
Так как мы применили делегирование, то меню  можно добавить вложенные списки ul/li и стилизовать их при помощи CSS –  а сам обработчик не потребует никаких изменений.

Другие действия браузера

Действий браузера по умолчанию достаточно много.

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

  • mousedown – нажатие кнопкой мыши в то же  время когда курсор находится на тексте начнет его выделение.
  • click на <input type=»checkbox»> –  поставит или уберет галочку.
  • submit – при нажатии на кнопку  <input type=»submit»> в форме данные отправятся на сервер.
  • wheel – движение колёсика мыши инициирует событие scroll  или  прокрутку страницы.
  • keydown – при нажатии клавиши клавиатуры  в поле ввода появится  символ.
  • contextmenu – при правом клике  мыши показывается контекстное меню браузера.

Все эти действия вам придется о отменить, если вы хотите обработать событие при помощи JavaScript.

События  также могут быть связаны между собой

Некоторые события могут  естественным образом вытекать друг из друга.

Читайте также  Объект события Event

Например, нажатие мышкой mousedown на поле ввода <input> приводит к фокусировке внутри него. Если отменить действие mousedown, то и фокуса не будет.

Итого

  • Браузер имеет встроенные действия при ряде событий – переход по ссылке, отправка формы и другие. Их можно отменить.
  • Имеется 2 способа отменить действие по умолчанию: первый – использовать  метод event.preventDefault() ( для IE8-: event.returnValue=false), а  второй – return false из обработчика события. 2-ой способ  будет работать, только если обработчик назначен через onсобытие.

Задачи

Почему  тут не работает return false?

Почему в этом документе return false не работает?

<script>
  function handler() {
    alert( "..." );
    return false;
  }
</script>

<a href="http://google.com" onclick="handler()">w3.org</a>

По замыслу, переход на google.com при клике должен отменяться. Однако, на самом деле он происходит.

В чём дело и как поправить?

Галерея изображений

Создайте галерею изображений, в которой основное изображение изменяется при клике на уменьшенный вариант.

Для обработки событий используйте делегирование, т.е. не более одного обработчика.

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Поделиться

Об авторе

admin administrator

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: