なぜstopPropagation（）を使用する必要がありますか？

Question

stopPropagation do.WhatがこのコードでstopPropagation（）を使用する必要があるのは何ですか？私はそれを使用しない場合は、Enterキーが初めて動作しません。 http://codepen.io/Juan1417/pen/XNJeWd

$(document).ready(function() { 
    $("#searchTerm").keypress(function (e) { 
     if (e.which == 13) { 
      $("#search").click(); 
      **e.stopPropagation();** 
      return false; 
     } 
    }); 

    $("#search").click(function() { 
     var searchTerm = $("#searchTerm").val(); 
     var url = "https://en.wikipedia.org/w/api.php?action=opensearch&search=" + searchTerm + "&format=json&callback=?"; 
     $.ajax({ 
      type: "GET", 
      url: url, 
      async: false, 
      dataType: "json", 
      success: function (data) { 
       for (var i = 0; i < data[1].length; i++) { 
        $("#output").prepend("<li><a href=" + data[3][i] + " target='_blank'>" + data[1][i] + "</a><br><span>" + data[3][i] + "</span><br>" + data[2][i] + "</p></li>"); 
       } 
      }, 
      error: function (errorMessage) { 
       alert(errorMessage); 
      } 
     }); 
    }); 
}); 

Answer 1

ですから（クリックハンドラを持っている）ボタンをクリックして、それが（それ自身のクリックハンドラを持っている）のdivの内側にあります。ここでは、コードです。

イベントの伝搬またはバブリングのため、両方のイベントハンドラが起動します。イベントは、最初に作成された要素で開始され、ルートに到達するまで引き続き引き継がれます。これを防ぐ唯一の方法はEvent.stopPropagation（）を使用することです。これは本質的に、イベントをそれ以上ディスパッチしないことを意味します。

・ホープ、このことができます...

Answer 2

ここでは、私はDOMにどのようにイベントリスナーおよび伝播の仕事を理解しようとするためには、書いたいくつかのコードです。

概念repl.itコードがフードの下で動作していることを想像してください。 https://repl.it/@maiya_02/understanding-event-emitters

対話型コードペン。ネストされたdivをクリックすると、eventObjectがDOMをバブルアップする方法を確認できます。イベントの伝播の停止がイベントのバブリングにどのように影響するかを確認するには、javascriptの15行目のコメントを外してください。 https://codepen.io/maiya/pen/OQVYPY?editors=1111

構造がある場合：

1. ボタン要素は、フードの下のコードは、そのボタン要素に「クリック」のようなプロパティが（あるかどうかを確認することになります

2. をクリックするとそれは。 「クリック」プロパティが機能に割り当てられているかどうかを確認します。

   button = { 
       tagName: 'button', 
       id: 'myButton', 
       click: function(event) { 
        console.log(event.currentLocation); 
        }, 
       parentNode: //points to the div object that contains this button element 
       } 
   

3. クリックプロパティが機能に割り当てられている場合、その関数はモミですed。イベントが発生したときに作成されたイベントオブジェクトは、その関数にパラメータとして渡されます。

4. 「イベントの伝播」が有効な場合、コードはparentNodeと呼ばれるボタン要素のプロパティを検索します。

   button.parentNode = { 
       tagName: 'div', 
       id: 'myDiv', 
       click: function(event) { 
        console.log('this event is being fired in the ' + event.currentLocation.id + ' element'); 
       }, 
       parentNode: // some other div that contains this div 
   } //object (node) that contains the button element 
   

5. この親要素にも機能に割り当てられているclick性質を持っている場合、その関数は、イベントオブジェクトを渡され、解雇されます。次に、コードはその要素の親を検索し、DOMのルートに到達するまでそのプロセスを繰り返します（ルート要素にはparentNodeがないため、コードはそこで見えなくなります）。

6. 「伝播を停止する」場合は、フードの下のコードがbutton要素オブジェクトのclickメソッドを起動し、他の親要素オブジェクトがclickメソッドを持つかどうかを調べるのをやめます。