爲什麼點擊事件的preventDefault（）也會阻止我的表單提交？

我有一個簡單的HTML表單：爲什麼點擊事件的preventDefault（）也會阻止我的表單提交？

<form name="form" id="form" method="post" action=""> 
    <label for="input_text"><span>Input Text:</span></label> 
    <input type="text" name="input_text" /> 
    <input type="submit" name="submit" value="Submit" /> 
</form>

然後，我阻止默認點擊動作，因爲我想使用AJAX來處理提交的，而不是常規的方法。

// prevent page refresh 
var form = document.getElementById('form'); 
function stopDefault(event) { 
    event.preventDefault(); 
} 
form.addEventListener('click', stopDefault, false);

但是，這會導致一些意外的行爲。

如果我得到提交按鈕併爲它創建一個匿名的onclick函數，即使表單是通過在表單字段內按下回車鍵提交時觸發的，onclick函數也會觸發，也就是說，它也會通過觸發點擊提交。這裏有一個例子：

var button = form.submit; 
button.onclick = function() { 
    console.log('clicked'); 
}

奇怪的是這個功能的onclick也將趕上非單擊表單提交。另一方面，如果我試圖抓住一個實際的表格提交...

form.onsubmit = function() { 
    console.log("submitted"); 
}

......它不會發射！

這是爲什麼？

對我來說，處理表單輸入onsubmit而不是onclick似乎更符合邏輯，但我想這不是它的工作原理。另外，作爲一個附註，有趣的是，preventDefault（）方法的目標事件是實際的窗體還是提交按鈕並不重要。

來源

2014-04-25 Kebman

爲了防止刷新頁面，你只需要這個

// prevent page refresh 
var form = document.getElementById('form'); 
form.onsubmit = function() { 
    console.log("submitted"); 
    return false; // this prevents page refresh 
}

FIDDLE

來源

2014-04-25 07:56:15

那麼，爲什麼不form.onsubmit火，當了preventDefault在玩嗎？除了讓我使用form.onsubmit函數之外，這是如何比preventDefault更好的呢？ – Kebman

由於要提交，您需要點擊一下。而你說的preventDefault裏面的點擊功能意味着_whatever這個點擊會觸發不要做它_它意味着提交按鈕上的表單。即使點擊元素內的回車也會觸發點擊操作，因爲它會導致提交按鈕點擊。 –

爲什麼點擊事件的preventDefault（）也會阻止我的表單提交？

回答

相關問題