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 - Схема отмены стандартного действия браузера JavaScript - Схема отмены стандартного действия браузера](/assets/images/tickets/2015.07/javascript-sample-event-prevent-default.png)
![JavaScript - Пример отмены стандартного действия браузера JavaScript - Пример отмены стандартного действия браузера](/assets/images/tickets/2015.07/javascript-event-prevent-default.png)
Если вы подписались на событие через 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 - Отмена стандартного действия не останавливает всплытие события (пузырька) JavaScript - Отмена стандартного действия не останавливает всплытие события (пузырька)](/assets/images/tickets/2015.07/javascript-sample-event-prevent-default-bubble.png)
Следовательно, отмена стандартного действия браузера для некоторого события не влияет на всплытие пузырька (события), т.е. они выполняются не зависимо друг от друга
В ситуациях, когда Вам необходимо отменить стандартное действие браузера и всплытие события (пузырька), можно использовать следующий код:
element.addEventListener("click",function(event) {
...
//отменить стандартные действия браузера
еvent.рreventDefault();
//отменить всплытие события, т.е. проткнуть пузырь
event.stopPropagation();
},false);
Комментарии: 0