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

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

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

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

  • Клик по ссылке  — вы переходите на новую страницу, адрес которой указан в атрибуте 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>.

Читайте также  События мыши: mouseover/out, mouseenter/leave

Это потому, что некоторые посетители очень любят сочетание «правый клик – открыть в новом окне».  Да, можно использовать и <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.

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

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

Читайте также  Введение в события JavaScript

Например, нажатие мышкой 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

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

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