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

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');
});

小提琴

---

观看精彩的视频后在这里,我明白,当我点击提交按钮,事件冒泡到窗体,然后将表单提交事件被触发.这解释了为什么在"提交"之前警告"点击"(在我添加e.stopPropagation()到按钮处理程序之前).

但是当我添加e.stopPropagation()到按钮处理程序时,"提交"仍然会被警告.为什么？我认为这stopPropagation可以防止事件冒泡到form,所以form.on('submit')听众不应该"听到"一个事件.

Answer 1

当您单击表单中的提交按钮时,单击事件会在按钮上生成并冒泡.提交事件在表单上生成(而不是按钮)并从那里冒泡.

如果停止在click事件上传播,则只是停止click事件的冒泡阶段.这对提交事件没有影响.

要停止提交操作,您必须向提交处理程序添加一个检查.

请记住,添加e.preventDefault()按钮中的单击处理程序不足以阻止生成提交事件,因为有更多方法可以提交表单而不仅仅是单击按钮.(例如按下enter输入字段).

Answer 2

看到处理程序

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

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

换句话说,stopPropagation只停止正在处理的当前事件传播到父元素,它不会停止元素的默认行为,那就是preventDefault!