1

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' の 2 つのアラートが発生します。

「2」のアラートをなくすには、nada 関数に何を追加できますか?

4

1 に答える 1

2

親要素へのイベントのバブリングを停止するには、eventオブジェクトにそのことを伝える必要があります。IE では、 を設定しevent.cancelBubble= trueます。他のブラウザでは、 を呼び出しますevent.stopPropagation()。

ブラウザが のような存在しないアンカー リンクをたどろうとしてトップにジャンプし続けないように、デフォルトのリンク フォロー アクションをオフにすることもできます#1。IE では、 を設定しevent.returnValue= falseます。他のブラウザでは、 を呼び出しますevent.preventDefault()。

eventオブジェクトはwindow.eventIE と同じようにアクセスできます。他のブラウザーでは、イベント ハンドラー関数に渡されます。両方で機能する関数にイベントを渡す方法は次のとおりです。

      <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>
于 2009-11-30T23:00:08.113 に答える