Могу ли я очистить стек событий в Firefox, используя Javascript?
-
10-07-2019 - |
Вопрос
В моем HTML есть иерархия тегов, которые содержат обработчики событий onclick. Onclick помещается в стек событий от листа обратно до корня иерархии. Я только хочу ответить на событие onclick листа. Могу ли я очистить стек событий вместо использования флага?
Например ...
<ul>
<li onclick="nada('1');"><a href="#1">1</a></li>
<li onclick="nada('2');"><a href="#2">2</a>
<ul>
<li onclick="nada('2.1');"><a href="#2.1">2.1</a></li>
<li onclick="nada('2.2');"><a href="#2.2">2.2</a></li>
<li onclick="nada('2.3');"><a href="#2.3">2.3</a></li>
</ul>
</li>
<li onclick="nada('4');"><a href="#4">4</a></li>
<li onclick="nada('5');"><a href="#5">5</a></li>
</ul>
Нажав на 2.2 с помощью этой функции ...
function nada(which)
{
alert(which);
}
... приведет к двум оповещениям для «2.2» и «2».
Что можно добавить в функцию nada, чтобы исключить предупреждение для '2'?
Решение
Чтобы остановить всплывающее событие для родительских элементов, вы должны сообщить об этом объекту event
. В IE вы устанавливаете event.cancelBubble = true
. В других браузерах вы вызываете event.stopPropagation ()
.
Возможно, вы также захотите отключить действие по умолчанию для отслеживания ссылок, чтобы браузер не продолжал подниматься наверх, пытаясь перейти по несуществующим ссылкам привязки, таким как # 1
. В IE вы устанавливаете event.returnValue = false
. В других браузерах вы вызываете event.preventDefault ()
.
Объект event
доступен в IE как window.event
. В других браузерах это передается в функцию обработчика событий. Способ передать событие в функцию, которая работает в обоих случаях:
<li onclick="nada('2.1', event);"><a href="#2.1">2.1</a></li>
function nada(n, event) {
alert(n);
if ('stopPropagation' in event) {
event.stopPropagation();
event.preventDefault();
} else {
event.cancelBubble= true;
event.returnValue= false;
}
}
Однако, вероятно, было бы лучше, чтобы все вокруг помещали событие onclick
в элемент a
, к которому оно обычно относится. Это помогает для доступности, так как элемент a
будет фокусируемым и управляемым с клавиатуры. И это означает, что вам не нужно беспокоиться о вызове обработчиков кликов родителей.
(Если хотите, вы можете стилизовать a
, чтобы он выглядел как обычный блок.)
Затем вы можете удалить лишние ссылки onclick
с помощью небольшого количества ненавязчивых сценариев:
<ul id="nadalist">
<li><a href="#1">1</a></li>
<li><a href="#2">2</a>
<ul>
<li><a href="#2.1">2.1</a></li>
<li><a href="#2.2">2.2</a></li>
<li><a href="#2.3">2.3</a></li>
</ul>
</li>
<li><a href="#4">4</a></li>
<li><a href="#5">5</a></li>
</ul>
<script type="text/javascript">
var links= document.getElementById('nadalist').getElementsByTagName('a');
for (var i= links.length; i-->0;) {
links[i].onclick= function() {
alert(this.hash.substring(1));
return false;
}
}
</script>
Другие советы
Я думаю, что эта статья на QuirksMode может помочь вам: Javascript - Порядок событий