我可以使用 Javascript 刷新 Firefox 中的事件堆栈吗？

Question

我的 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”的警报？

Answer 1

要阻止事件向上冒泡到父元素，您必须将其告知 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>