为什么我需要使用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（）？

回答

相关问题