2

別の div にネストされた div があり、いずれかの div がクリックされたときにアラートをトリガーする mousedown イベントがあるとします。当然のことながら、div がネストされているため、1 回のクリックでアラートが 2 回表示されます。これが一度だけ警告するのを防ぐにはどうすればよいですか?

4

4 に答える 4

2 
$('div').click(function(e) {
      e.stopPropagation();
     //
     //do what you want
});
于 2011-07-18T12:01:30.247 に答える
1

ネストされた div のクリックの伝播を停止できます。つまり、クリックがバブルアップして、親 div にアタッチされたクリック ハンドラーをトリガーすることはありません。次に例を示します。

// attach to all divs
$("div").mousedown(function() {
    // do stuff
});

// stop propagation for nested divs
$("div div").mousedown(function(e) {
    e.stopPropagation()
});

http://api.jquery.com/event.stopPropagation/を参照してください。

于 2011-07-18T12:00:51.457 に答える
1

2 つの div 要素がネストされている場合、HTML 要素の階層があります。何かのようなもの：

body
   firstDiv
      secondDiv

にはsecondDivが埋め込まれており、 は に埋め込まfirstDivれていbodyます。これで、secondDiv をクリックするたびに、firstDiv もクリックされ、body もクリックされます。したがって、これら 3 つの要素に対して 3 つのイベント ハンドラーを作成すると (たとえば、3 つのアラートを表示する)、3 つのアラート メッセージが表示されます。この現象を泡立ちと呼びます。これらの要素が水の層 (子要素が深い) であると想像し、イベント (クリックなど) を泡と見なすと、下層の泡を解放すると、表面に到達するまで上位層にバブルアップします (HTML 要素、またはさらに上位のドキュメント オブジェクト、およびルート オブジェクトであるウィンドウ オブジェクト)。

jQuery では e.stopPropagation() 関数を使用してバブリングをキャンセルできます。純粋な JavaScript では、return false;バブリングを停止するために使用します。

于 2011-07-18T12:08:21.740 に答える
0

イベント ハンドラーを親 divのみに追加しないのはなぜですか。そうすれば、常に 1 回だけ発生します。

jsFiddle をチェックしてください: http://jsfiddle.net/aPMB3/

于 2011-07-18T11:55:04.630 に答える