當我在提交按鈕級別停止傳播時，為什么表單提交事件會觸發？

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>