为什么我需要使用stopPropagation()? [英] Why do i need to use stopPropagation()?

问题描述

我不了解stopPropagation的功能.为什么需要在此代码中使用stopPropagation()?如果我不使用它，回车键将在第一时间不起作用.这是代码: http://codepen.io/Juan1417/pen/XNJeWd

I do not understand what does stopPropagation do.Why i need to use stopPropagation() in this code?. If i don't use it the enter key doesn't work the first time. Here is the code: 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);
            }
        });
    });
});

推荐答案

这里是我编写的一些代码，目的是试图了解事件侦听器和传播在DOM中的工作方式.

Here is some code that I wrote, in order to try to understand how event-listeners and propagation work in the DOM.

概念代表.我如何看待代码在幕后工作: https://repl.it/@maiya_02/understanding-event-emitters

Conceptual repl.it. How I imagine the code is working under the hood: https://repl.it/@maiya_02/understanding-event-emitters

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

Interactive codepen. Click on nested divs to see how the eventObject bubbles up the DOM. Uncomment line 15 in the javascript, to see how stopping event propagation effects the bubbling of the event. https://codepen.io/maiya/pen/OQVYPY?editors=1111

如果结构为:

1. 单击按钮元素

2. 底层代码看起来是否有属性(如该按钮元素上的"click".它看起来是否有"click"属性已分配给函数.

1. A button element is clicked

2. The code under the hood looks to see if there is a property (like 'click' on that button element. It looks to see if the 'click' property is assigned to a function.

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

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

If the click property is assigned to a function, that function is fired. The event object that was created when the event happened is passed as the parameter to that function.

如果启用了事件传播"，则代码将在按钮元素上查找名为parentNode的属性.

If 'event propagation' is enabled, the code will then look for a property on the button element, called 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，因此代码将停止在那儿查找).

If this parent element also has a click property that is assigned to a function, then that function is also passed the event object and fired. Then, the code looks for that element's parent and repeats the process until it gets to the root of the DOM (the root element will not have a parentNode, so the code will stop looking there).

这篇关于为什么我需要使用stopPropagation()?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！