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

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

Как отменить стандартные действия браузера

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

Для отмены стандартного действия, который выполняет браузер, необходимо использовать метод preventDefault() объекта event.

Синтаксис:

element.addEventListener("click", function(event) {
  ...
  event.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);