Question

我不明白stopPropagation是做什么的。为什么我需要在这段代码中使用stopPropagation（）？如果我不使用它，则输入键第一次不起作用。以下是代码：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中的工作方式。

概念代表我怎么想象代码在引擎盖下工作： https://repl.it/@maiya_02/understanding-event-emitters

交互式代码集。单击嵌套的div以查看eventObject如何冒泡DOM。取消注释javascript中的第15行，以查看停止事件传播如何影响事件的冒泡。 https://codepen.io/maiya/pen/OQVYPY?editors=1111

如果结构是：

点击按钮元素

引擎盖下的代码会查看是否有属性（比如该按钮元素上的'click'。它会查看是否将'click'属性分配给函数。

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

如果将click属性分配给某个函数，则会触发该函数。事件发生时创建的事件对象作为参数传递给该函数。

如果启用了“事件传播”，则代码将在按钮元素上查找名为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，因此代码将停止在那里查找）。
< / LI>
如果“停止传播”，引擎盖下的代码将触发按钮元素对象上的click方法，然后停止查看其他父元素对象是否具有click方法。

为什么我需要使用stopPropagation（）？

2 个答案: