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

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

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

Имеется много различных событий, при наступлении которых браузер выполняет определённые стандартные действия:

• mousedown - запускает выделение при перемещение мыши;
• click на элементе <a href="..."> - переходит на указанный URL;
• click на <input type="checkbox"> - устанавливает или снимает флажок;
• click на кнопке с type="submit" или нажатие Enter внутри поля формы вызывает событие submit и отправляет форму на сервер;
• keydown - нажатие клавиши может привести к добавлению символа в поле или другим действиям;
• contextmenu - событие происходит при щелчке правой кнопкой мыши (выполняет отображение контекстного меню браузера и т.п.).

Иногда в процессе обработке этих событий вы хотите, чтобы браузер не выполнял соответствующее стандартное действие. Его необходимо отменить и вместо него выполнить другое действие. В JavaScript возможно отменить стандартное действие браузера, для этого используется метод preventDefault.

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

Отмена стандартного действия браузера осуществляется посредством вызова метода preventDefault в обработчике события.

Синтаксис:

$element.addEventListener('click', function(e) {
  // отменяем стандартное действие браузера
  e.preventDefault();
  ...
}, false);

Например, отменим стандартное действие для элемента а, имеющего id="myAnchor":

<a id="myAnchor" href="https://www.yandex.ru/">Перейти на сайт Яндекс</a>
<script>
var myAnchor = document.getElementById("myAnchor");
myAnchor.addEventListener("click", function(event) {
  console.log("Мы отменили стандартное действие браузера");
  event.preventDefault();
}, false);
</script>

Если вы подписались на событие через JavaScript с помощью свойства объекта on[event], т.е. способом, не рекомендованным стандартом (addEventListener()). То для отмены стандартного действия кроме event.preventDefault() также можно ещё использовать return false.

Синтаксис:

element.onclick = function(event) {
  //...
  return false;
}

Изменим вышеприведённый пример, выполнив подписку на событие "click" через свойство DOM-элемента on[событие]. Для прерывания выполнения действия будем использовать инструкцию return false:

<a id="myAnchor" href="https://www.yandex.ru/">
  Перейти на сайт Яндекс
</a>
<script>
  var myAnchor = document.getElementById("myAnchor");
  myAnchor.onclick = function() {
    console.log("Мы отменили стандартное действие браузера");
    //возвращаем false, тем самым отменяем стандартное действие браузера,
    //т.е. прерываем дальнейшее выполнение действия
    return false;
  };
</script>

Возможность отменять стандартные действия браузера очень часто применяются перед отправкой формы на сервер. Она используется для того чтобы проверить правильность заполнения формы с помощью скриптов JavaScript.

Влияет ли отмена стандартного действия, которое выполняет браузер, на его всплытие

В этом разделе мы рассмотрим следующий вопрос: "Влияет ли на всплытие события то, что мы отменили выполнение стандартного действия браузера, которое с ним связано?"

Чтобы разобраться в этом вопросе, давайте рассмотрим следующий пример:

<div>
  <!-- Этому элементу мы отменим стандартное действие, которое выполняет браузер -->
  <a id="myAnchor" href="https://www.yandex.ru/">
    Перейти на сайт Яндекс
  </a>
</div>
<script>
document.addEventListener("DOMContentLoaded", function() {
  var allElements = document.getElementsByTagName("*");
  for (var i=0; i < allElements.length; i++) {
    allElements[i].addEventListener("click",function() {
      console.log(this.tagName);
      //если элемент имеет id="myAnchor"
      if (this.id === "myAnchor") {
        console.log("Мы отменили стандартное действие браузера");
        //отменить стандартное действие браузера
        //(прервать выполнение обработчика, связанного с этим событием)
        event.preventDefault();
      }
    },false);
  };
  document.addEventListener("click",function() {console.log(this);},false);
  window.addEventListener("click",function() {console.log(this);},false);
});
</script>

Из этого примера видно, что отмена стандартного действия браузера (переход на страницу, указанную в атрибуте href, при нажатии на ссылку) не останавливает всплытие пузырька (события).

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

В ситуациях, когда Вам необходимо отменить стандартное действие браузера и всплытие события (пузырька), можно использовать следующий код:

element.addEventListener("click",function(event) {
  ...
  //отменить стандартные действия браузера
  еvent.рreventDefault();
  //отменить всплытие события, т.е. проткнуть пузырь
  event.stopPropagation();
},false);