1

例えば：

<ul>
<li>
   first element
   <ul>
    <li> second element
       <ul>
          <li> third element </li>
       </ul>
      </li>
   </ul>
</li>
</ul>

<script>
$('li').click( function() {
   alert('hello world!!!');
});
</script>

出力は次のとおりです。

3 番目の要素をクリックすると 3 つのアラートが表示される

2 番目の要素をクリックすると 2 つのアラートが表示される

最初の要素をクリックすると 1 つのアラート

jQueryでこれを防ぐ方法は?

私が必要としているのは、「LI」要素のクリックごとに 1 つのアラートです。

4

2 に答える 2

3

を使用しe.stopPropagation();ます。

説明:イベントが DOM ツリーをバブリングしないようにして、親ハンドラーにイベントが通知されないようにします。

$('li').on('click',function(e)
{
   e.stopPropagation();
   alert('hello world!!!');
});
于 2013-03-18T04:18:36.823 に答える
1

ネストされたli要素があるため。クリック ハンドラーはli、親を含むすべての要素に適用されますli。

イベント バブルの伝播を停止する必要があります。そのため、イベント ハンドラーを実行すると、DOM ツリーを上って同じイベントをトリガーすることはありません。

$('li').click( function(e) {
   alert('hello world!!!');
   e.stopPropagation();
});
于 2013-03-18T04:19:26.633 に答える