Javascript 当我在提交按钮级别停止传播时，为什么表单提交事件会触发？

HTML

<form>
    <input type='text'>
    <button type='submit'>Submit</button>
</form>

---

在观看了这段精彩的视频后，我了解到当我单击submit按钮时，事件会出现在表单上，然后表单的submit事件会被触发。这解释了为什么在“提交”之前（在我将

e.stopPropagation（）

添加到按钮处理程序之前）会提醒“单击”

---

但是，当我将

e.stopPropagation（）

添加到按钮处理程序时，“submit”仍然会发出警报。为什么？我认为

stopPropagation

可以防止事件冒泡到

表单中，因此
表单on（'submit'）
侦听器不应该“听到”事件。
您需要
e.preventDefault（）在按钮中单击：


$（'form'）。关于（'submit'，函数（e）{
警报（“提交”）；
e、 预防默认值（）；
});
$（'button'）。在（'click'）上，函数（e）{
e、 预防默认值（）；
警报（“点击”）；
});

提交
请参阅处理程序

$('button').on('click', function(e) {
    e.stopPropagation();

请注意，事件是
click
，因此您正在阻止
click
事件向上传播，并且它根本不会与
submit
事件交互，提交按钮的默认操作是提交表单，因此仍会触发该事件，停止的方法是使用
preventDefault

换句话说，
stopPropagation
只会阻止正在处理的当前事件传播到父元素，而不会停止元素的默认行为，即
preventDefault
 当您单击表单中的提交按钮时，单击事件会在按钮上生成并弹出气泡。submit事件在表单（而不是按钮）上生成，并从那里冒出气泡

如果停止对单击事件的传播，则只是停止单击事件的冒泡阶段。这对提交事件没有影响

要停止提交操作，必须向提交处理程序添加检查

请记住，在按钮中的单击处理程序上添加
e.preventDefault（）
，不足以防止生成提交事件，因为提交表单的方法比单击按钮更多。（例如，在输入字段中按enter键）。
您正在阻止单击向上传播链，而不是停止提交event@adeneo那么提交事件是如何被触发的呢？它被触发是因为提交按钮的默认行为是提交表单，但是停止传播只会阻止当前事件向上移动到父元素，在本例中，
单击
e.stoppropogation:True，即@DontVoteMeDown。实际上这里不需要
stopPropagation
。默认情况下，
表单
上下文中的
按钮
元素提交表单。所以我们阻止它执行它的默认功能。我想我不理解的是提交事件是如何“开始”的。我想象它是来自提交按钮上的点击事件，但我想这不是它的工作方式。您能否详细说明提交事件是如何“启动”的？此默认行为已编程到引擎中。这些行为是跨浏览器标准化的。如果在表单中的输入字段中按enter键，将在表单上生成提交。类似地，如果单击表单中的提交按钮，它将在表单上生成提交事件。这些行为还有很多。您可以使用
.preventDefault（）
来阻止它们。您可能会明白为什么尝试捕获所有可能会生成提交事件的事件是不明智的。如果发生提交事件，只处理提交事件要容易得多。请注意，在IE中，如果您
preventDefault
在下拉列表中按“Enter”键的事件，它将打破选择项目的默认行为（空格键打开下拉列表，“Enter”选择）。我想知道如果有嵌套表单会发生什么！，内部提交将传播到外部表单的onsubmit。陛下interesting@Biboswan您不能嵌套
标记，类似地，您也不能嵌套
标记。
$('button').on('click', function(e) {
    e.stopPropagation();