在追奇怪的問題時發現的,實際上是個當年沒學好 (或是太久沒用忘記了),現在回頭重新學的東西,在 Stack Overflow 上很久前就有人問過了:「<button> vs. <input type="button"> -- which to use?」。
我遇到的問題是 <button>
預設會觸發 submit
事件 (<input type="button">
不會,然後我以為 <button>
也不會)。
而這邊又遇到 <button>
上綁定了 click()
事件的後續行為在 Chromium 與 Firefox 不同。
我在 click()
事件裡修改某些 input field 後想要觸發 submit()
事件時透過 document.querySelector('#second_submit_button').click()
觸發第二個 submit 按鈕,但在 Chromium 上會走到第一個 submit,而在 Firefox 上則是會走第二個 submit...
不確定這種複雜的行為是怎麼被定義的 (也蠻有機會是沒定義的),所以只先查了比較單純的東西。
首先是現代的 HTML 規格中定義 <button>
的行為是在「The button element」這邊,裡面提到:
The type attribute controls the behavior of the button when it is activated. It is an enumerated attribute with the following keywords and states:
中間列了一張表列出 type
可以設定的值,然後說如果沒有指定 type
的話就是 submit:
The attribute's missing value default and invalid value default are both the Submit Button state.
If the type attribute is in the Submit Button state, the element is specifically a submit button.
知道為什麼後就能夠規劃解法了,解法看起來有兩條路:
第一條是用 <input type="button">
,這樣就不會觸發瀏覽器的預設 submit 行為,就不會有後續的分支要處理。
第二條是用 event.preventDefault() 躲開問題,就... 會動。
不過這代表小時候沒學好啊... 如果我記得 <button>
預設會 submit 的話,我就會習慣用 <input type="button">
,避免常態性中獎 @_@