web-dev-qa-db-ja.com

event.preventDefaultとevent.stopPropagation

誰かがevent.preventDefault()とevent.stopPropagation()の違いを説明できますか？

テーブルがあり、そのテーブル内にimgタグがあります。

Imgタグをクリックすると、ポップアップが表示されます。

しかし、複数の行の選択を停止したいので、次を使用します。

$("table.items tbody tr").click(function(event) {
        event.stopPropagation();
    });

Jsコードを使用すると、ポップアップが表示されません。

Jsコードを削除すると、ポップアップが機能します。

$(".info").live("click",function(e){
    //console.log('ok');
    e.stopPropagation();
    var elem = $(this);
    var id = $(this).attr("id").replace("image_","container_");
    $('#'+id).toggle(100, function() {
        if($(this).css('display') == 'block') {
            $.ajax({
                url: "$url",
                data: { document_id:elem.attr('document_id') },
                success: function (data) {
                    $('#'+id).html(data);
                }
            });
            }
        });
});

どうして？

javascriptjquerypreventdefaultstoppropagation
16
Ionut Flavius Pogacian

私はJavascriptの専門家ではありませんが、私の知る限り：

stopPropagationは、イベントがチェーンをバブルアップしないようにするために使用されます。例えば。 <td>タグは、その親のクリックイベントも起動します<tr>、その親<table>など。stopPropagationは、これが起こらないようにします。

preventDefaultは、要素の通常のアクションを停止するために使用されます。リンクのクリックハンドラー内のpreventDefaultは、リンクの追跡を停止するか、送信ボタンでフォームの送信を停止します。

36
sevenseacat
  • childのstopPropagationは、そのイベントがparent（祖先全体）で発生するのを停止します
  • childのpreventDefaultは、子のイベントを停止しますが、それはparentで発生します（そして先祖も！）

さて、親であるコードで？子供は誰ですか？ imgは子ですtrは親です（正直に言うと祖父母です）ので、stopPropagationコードがあるべき場所を推測します。

7
user2587132

イベント preventDefault From W3C：

Event.preventDefault（）メソッドは、要素のデフォルトアクションの実行を停止します。例えば：

送信ボタンがフォームを送信しないようにするリンクがURLをたどらないようにする

イベント stopPropagation W3Cから ：

Event.stopPropagation（）メソッドは、親要素へのイベントのバブリングを停止し、親イベントハンドラーが実行されないようにします。

6
Fals