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

我不明白stopPropagation做什么。为什么我需要在这段代码中使用stopPropagation（）？。如果我不使用它，回车键第一次就不起作用了。代码如下：

$（文档）.ready（函数（）{
$（“#搜索词”）。按键（功能（e）{
如果（e.which==13）{
$（“#搜索”）。单击（）；
**e、 停止传播（）**
返回false；
}
});
$（“#搜索”）。单击（函数（）{
var searchTerm=$（“#searchTerm”）.val（）；
变量url=”https://en.wikipedia.org/w/api.php?action=opensearch&search=“+searchTerm+”&format=json&callback=？”；
$.ajax({
键入：“获取”，
url:url，
async:false，
数据类型：“json”，
成功：功能（数据）{
对于（var i=0；i
”+data[3][i]+”
“+data[2][i]+”
”）；
}
},
错误：函数（错误消息）{
警报（错误消息）；
}
});
});
});

所以你点击一个按钮（它有一个点击处理程序），它就在一个div里面（它有自己的点击处理程序）

由于事件传播或冒泡，两个事件处理程序都将启动。事件从最初创建它们的元素开始，并继续向下传递，直到它们到达根。防止这种情况发生的唯一方法是使用Event.stopPropagation（），这本质上意味着——不要再调度事件

希望这能有所帮助……

所以你点击一个按钮（它有一个点击处理程序），它在一个div中（它有自己的点击处理程序）

由于事件传播或冒泡，两个事件处理程序都将启动。事件从最初创建它们的元素开始，并继续向下传递，直到它们到达根。防止这种情况发生的唯一方法是使用Event.stopPropagation（），这本质上意味着——不要再调度事件

---

希望这有助于…

以下是我编写的一些代码，以便尝试了解事件侦听器和传播在DOM中的工作方式

概念性的，概念性的。我如何想象代码在引擎盖下工作：

交互式代码笔。单击嵌套的div以查看eventObject如何在DOM中冒泡。取消对javascript中第15行的注释，以查看停止事件传播如何影响事件的冒泡。

如果结构是：

单击按钮元素

引擎盖下的代码查看是否存在属性（如“单击”按钮元素）。它查看“单击”属性是否分配给函数

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的根（根元素没有父节点，因此代码将停止在那里查看）

如果“停止传播”，引擎盖下的代码将在button元素对象上触发

单击

方法，然后停止查看其他父元素对象是否具有

单击

方法

---

下面是我编写的一些代码，目的是试图了解事件侦听器和传播在DOM中是如何工作的

概念性回复。我如何想象代码在引擎盖下工作：

交互式代码笔。单击嵌套div查看eventObject如何在DOM中冒泡。取消javascript中第15行的注释，查看停止事件传播如何影响事件冒泡。

如果结构是：

单击按钮元素

引擎盖下的代码查看是否存在属性（如“单击”按钮元素）。它查看“单击”属性是否分配给函数

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的根（根元素没有父节点，因此代码将停止在那里查看）

如果“停止传播”，引擎盖下的代码将在button元素对象上触发

单击

方法，然后停止查看其他父元素对象是否具有

单击

方法

---

stopPropagation阻止进一步处理按键事件。如果不这样做，它可能会触发表单提交，从而取消javascript过程。您是否查找过它，或者为什么我不需要在$（“#搜索”）中使用它。单击（函数（）{}；可能是因为事件是否在该元素上传播无关紧要？为什么不触发表单提交？？？StopRopagation会阻止进一步处理按键事件。如果不这样做，它可能会触发表单提交，从而取消javascript过程。您有没有查过它，或者为什么我不需要告诉我们将它放在$（“#search”）中。单击（function（）{}；可能是因为事件是否在该元素上传播并不重要