爲什麼我需要使用stopPropagation（）？

我不明白stopPropagation是做什麼的。爲什麼我需要在這段代碼中使用stopPropagation（）？如果我不使用它，第一次輸入鍵不起作用。下面是代碼：http://codepen.io/Juan1417/pen/XNJeWd 爲什麼我需要使用stopPropagation（）？

$(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); 
      } 
     }); 
    }); 
});

來源

2016-11-07 Juan

stopPropagation防止keypress事件被進一步處理。如果你不這樣做，它可能會觸發一個表單提交，從而取消你的javascript過程。 –

你有沒有在[MDN]（https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation）或[jQuery's site]（https://api.jquery.com）上查找它/event.stoppropagation/） – adeneo

爲什麼我不需要在$（「＃search」）中使用它。單擊（函數（）{}; – Juan

所以，你點擊一個按鈕（其中有一個點擊處理程序），它是一個div（它有它自己的點擊處理）內。

由於事件傳播或冒泡，兩個事件處理程序都會觸發。事件從第一次創建的元素開始，並繼續傳遞下去，直到它們到達根。防止這種情況的唯一方法是使用Event.stopPropagation（），這基本上意味着 - 不要再發送一個事件。

希望這有助於...

來源

2018-01-29 16:08:12

下面是一些代碼，我寫的，爲了試圖瞭解事件偵聽器和DOM中的傳播是如何工作的。

概念repl.it.我如何想象代碼在底層工作： https://repl.it/@maiya_02/understanding-event-emitters

交互式codepen。點擊嵌套的div來查看eventObject如何冒泡DOM。取消javascript中的第15行以查看事件傳播如何停止事件的冒泡。 https://codepen.io/maiya/pen/OQVYPY?editors=1111

如果結構是：

按鈕元素被點擊

引擎蓋下的代碼查看是否有一個屬性（如「點擊」該按鈕元素就可以了。看起來，看看是否「點擊」屬性分配的功能。

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

如果點擊屬性分配給一個函數，該函數是FIR編輯。事件發生時創建的事件對象作爲參數傳遞給該函數。

如果啓用了「事件傳播」，則代碼將在按鈕元素上尋找一個名爲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

如果該父元素還具有被分配到的功能的click屬性，則該功能也被傳遞事件對象和燒製。然後，代碼查找該元素的父級，並重復該過程，直到它到達DOM的根（根元素不會有parentNode，因此代碼將停止在那裏查看）。
如果'停止傳播'，引擎蓋下的代碼會在button元素對象上觸發click方法，然後停止查看其他父元素對象是否有click方法。

來源

2018-01-29 20:13:52 Maiya

爲什麼我需要使用stopPropagation（）？

回答

相關問題