11

Stackoverflowで見つけたコードを使用して、この「要素の外側をクリックすると閉じる」タイプのものをセットアップしようとしていました:

$(document).click(function() {
 $('.list-to-hide').hide();
});

$('.show-list-button').click(function(event) {
 event.stopPropagation();
});

誰かが stopPropagation で後の部分を説明できますか? なぜそれが必要なのかわかりません。

ありがとう！マット

4

4 に答える 4

46

これを想像してください：

<div>
    DIV
    <span>
        Span
    </span>
<div>

と：

$('div').click(function() { alert('div clicked'); });
$('span').click(function() { alert('span clicked'); });

それぞれをクリックすると何が起こるかを確認してください

スパンをクリックすると、div もクリックするため、たまたま div もトリガーされます。

ここで、スパンのみをアラートしたい場合は、スパンをクリックしたときに div クリックがトリガーされないようにする必要があるため、次のようにします。

$('div').click(function() { alert('div clicked'); });
$('span').click(function(e) { alert('span clicked'); e.stopPropagation(); });

今起こっていることを見てください

于 2011-07-22T02:18:34.023 に答える
8

サンプルコードには重要な部分がありません:

$(document).click(function() {
    $('.list-to-hide').hide();
});

$('.show-list-button').click(function(event) {
    event.stopPropagation();
    $('.list-to-hide').show();
});

がないと、リストがevent.stopPropagation()表示されてから非表示になります。基本的に、このクリック イベントをTHIS CHILD NODEにのみ適用し、親コンテナーに何も伝えないでください。.show-list-button$(document)event.stopPropagation()

このように考えてみてください。タクシーを 100 ドルで借ります。運転手は彼の会社に 80 ドルを渡します。event.stopPropagation()会社は乗車について何も知る必要がないので、100 ドルすべてを保持するように彼に言うようなものです。

于 2011-07-22T02:16:40.700 に答える
3

event.stopPropagation();イベントが DOM をバブリングするのを防ぎます。この行がないと.show-list-button、ドキュメントのクリック ハンドラーをクリックしても起動します。これにより、ドキュメントのクリックは発火しません。

于 2011-07-22T02:05:41.637 に答える
1

これを読んだことがありますか？

http://api.jquery.com/event.stopPropagation/

イベントが DOM ツリーをバブリングするのを防ぎ、親ハンドラーにイベントが通知されるのを防ぎます。

例

クリック イベントでバブリングを停止します。

$("p").click(function(event){
  event.stopPropagation();
  // do something
});
于 2011-07-22T02:05:15.347 に答える