Question

HTML

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

的JavaScript

$('form').on('submit', function(e) {
    alert('submit');
    e.preventDefault();
});

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

Fiddle

观看精彩视频here后，我了解到当我点击提交按钮时，事件会冒泡到表单，然后触发表单的提交事件。这解释了为什么在“提交”之前（在我将e.stopPropagation()添加到按钮处理程序之前）会提醒“clicked”。

但是当我向按钮处理程序添加e.stopPropagation()时，“提交”仍然会被警告。为什么？我认为stopPropagation会阻止事件冒泡到form，因此form.on('submit')听众不应该“听到”某个事件。

Answer 1

单击表单中的提交按钮时，单击事件会在按钮上生成并冒泡。提交事件在表单上生成（而不是按钮）并从那里冒泡。

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

要停止提交操作，您必须将检查添加到提交处理程序。

请注意，在按钮中单击处理程序添加e.preventDefault()不足以阻止提交事件，因为提交表单的方式多于单击按钮。（例如，在输入字段中按输入。）

Answer 2

查看处理程序

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

请注意，该事件为click，因此您要阻止click事件向上传播，并且不会与submit事件进行交互总之，仍然会触发，因为提交按钮的默认操作是提交表单，而停止该操作的方法是阻止preventDefault的默认操作

换句话说，stopPropagation仅阻止当前正在处理的事件传播到父元素，它不会停止元素的默认行为，即preventDefault！

Answer 3

按钮点击中还需要e.preventDefault();：

＆＃13;

$('form').on('submit', function(e) {
    alert('submit');
    e.preventDefault();
});

$('button').on('click', function(e) {
    e.preventDefault();
    alert('clicked');
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
    <input type='text'/>
    <button type='submit'>Submit</button>
</form>

＆＃13;

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

3 个答案: