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

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

小提琴

---

观看精彩的视频后在这里 ，我明白，当我点击提交按钮，事件冒泡到窗体，然后将表单提交事件被触发。 这解释了为什么“clicked”在“submit”之前被警告（在我将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 ！

Answer 3

你需要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>