情景描述
有時候我們可能需要在表單中放置多個按鈕，比如表單頁面常見的按鈕有創建和取消。點擊創建按鈕會觸發單擊響應事件，在單擊響應事件中進行提交表單，這沒有任何問題。點擊取消按鈕的時候，觸發對應的單擊響應事件，這個單擊響應事件中主要處理關閉表單頁面邏輯，所以會關閉頁面，這也正常。但是！打開控制檯監聽請求會發現，它也會提交表單。
項目應用
項目中有個需求：點擊一個按鈕查詢當前IP所在地的經緯度。
在頁面中加入一個button按鈕之後，代碼如下：
<button οnclick="getLatAndLng();" style="color: #00c0ef" value="查詢經緯度">查詢經緯度</button>
這樣寫，點擊查詢的時候發現問題了，會自動的將form表單提交，我就很鬱悶了，在查閱相關資料之後找到原因所在了。
原因
出現上述的問題主要是button標籤的type屬性惹的禍，button的type屬性值有三個分別爲button、submit、reset。當我們在利用button標籤寫一個按鈕且沒有指定其type屬性時，瀏覽器會被默認指定爲submit（IE7以下版本會默認指定爲button）。當按鈕的type屬性被指定爲submit的時候，點擊它會提交表單。
在文檔上查到了原因，如圖：
解決方案
<button type="button" οnclick="getLatAndLng();" style="color: #00c0ef" value="查詢經緯度">查詢經緯度</button>
當需要在頁面中或者是form標籤中放置一個button按鈕的時候，如果這個按鈕不是做提交表單的，切記一定要設置其的屬性type="button"。
參考文檔：https://www.w3.org/TR/2011/WD-html5-20110525/the-button-element.html#attr-button-type