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 - Схема отмены стандартного действия браузера

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

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

Предупреждение: Данный способ (return false) не будет работать, если обработчик назначен через метод addEventListener().

Синтаксис:

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, при нажатии на ссылку) не останавливает всплытие пузырька (события).

JavaScript - Отмена стандартного действия не останавливает всплытие события (пузырька)

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

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

element.addEventListener("click",function(event) {
  ...
  //отменить стандартные действия браузера
  еvent.рreventDefault();
  //отменить всплытие события, т.е. проткнуть пузырь
  event.stopPropagation();
},false);
Внимание: Не любое стандартное действие браузера можно отменить. Это может быть связано с тем, что стандартные действия для некоторых событий браузер выполняет до того как происходит вызов его обработчика. Следовательно, такие действия уже отменить нельзя. Кроме этого, стандартное действие для некоторых событий браузер не позволяет отменить из-за политики безопасности, которая в нём используется.


   JavaScript и jQuery 0    2741 0

Комментарии (0)

    Вы должны авторизоваться, чтобы оставлять комментарии.