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

Why does the form submit event fire when I have stopped propagation at the submit button level?

提问by Adam Zerner

HTML

HTML

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

JavaScript

JavaScript

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

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

Fiddle

小提琴

---

---

After watching the great video here, I understand that when I click the submit button, the event bubbles up to the form, and the form's submit event is then triggered. Which explains why "clicked" is alerted before "submit" (before I add e.stopPropagation()to the button handler).

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

But when I add e.stopPropagation()to the button handler, "submit" is still alerted. Why? I thought that stopPropagationprevents the event from bubbling up to the form, and so the form.on('submit')listener shouldn't be "hearing" an event.

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

回答by Halcyon

When you click a submit button in a form the click event spawns on the button and bubbles up. The submit event spawns on the form (not the button) and bubbles up from there.

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

If you stop propagation on the click event you're just stopping the bubbling phase of the click event. This has no effect on the submit event.

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

To stop the submit action you have to add a check to the submit handler.

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

Keep in mind that adding e.preventDefault()on the click handler in the button is not enough to prevent the submit event from spawning since there are more ways to submit a form than just clicking a button. (pressing enterin an input field for instance).

请记住，e.preventDefault()在按钮中添加单击处理程序并不足以阻止提交事件产生，因为提交表单的方法不仅仅是单击按钮。（例如按下enter输入字段）。

回答by adeneo

See the handler

查看处理程序

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

Note that the event is click, so you're stopping the clickevent from propagating up the chain, and that doesn't interact with the submitevent at all, that still fires as the default action of a submit button is to submit the form, and the way to stop that is to prevent that default action with preventDefault

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

In other words, stopPropagationonly stops the current event being handled from propagating to parent elements, it does not stop the default behaviour of the element, that would be preventDefault!

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

回答by KJ Price

You need e.preventDefault();in the button click as well:

您还需要e.preventDefault();在按钮中单击：

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

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

<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>