Могу ли я очистить стек событий в Firefox, используя Javascript? - PullRequest
Новая
       7

Могу ли я очистить стек событий в Firefox, используя Javascript?

1 голос
/ 01 декабря 2009

В моем 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»?

Ответы [ 2 ]

1 голос
/ 01 декабря 2009

Чтобы прекратить всплывание события до родительских элементов, вы должны сообщить об этом объекту event. В IE вы устанавливаете event.cancelBubble= true. В других браузерах вы звоните event.stopPropagation().

Возможно, вы также захотите отключить действие по умолчанию после ссылки, чтобы браузер не продолжал подниматься вверх, пытаясь перейти по несуществующим якорным ссылкам, таким как #1. В IE вы устанавливаете event.returnValue= false. В других браузерах вы звоните event.preventDefault().

Объект event доступен как window.event в IE. В других браузерах это передается в функцию обработчика событий. Способ передать событие в функцию, которая работает в обоих случаях: 

      <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>
0 голосов
/ 01 декабря 2009

Я думаю, что эта статья на QuirksMode может помочь вам: Javascript - Порядок событий

...