javascript - 为什么我需要使用 stopPropagation()？

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()，这本质上意味着——不要进一步分派(dispatch)事件。

希望这有帮助...