1. 程式人生 > >在自己寫的html中點選button,頁面會自動重新整理的問題

在自己寫的html中點選button,頁面會自動重新整理的問題

以前在寫練習的時候遇到過這樣一個問題,自己在html中寫了一個button

<button>test1</button>

在沒有給其附上onclick事件時是點選是不會有任何反應的
但是把這個button放入from表單時

<form action="testAction" method="psot">
    <button>test1</button>
</form>

無論有沒有給button附上事件,點選後頁面都會重新整理
查找了半天資料網上有說是不是事件寫錯了或者是js衝突啊之類的問題,在確認了自己的所有方法沒有寫錯之後

,按照那些教程改了之後依舊沒有解決,那麼出現這種錯誤就不是衝突的問題

後來將button的程式碼加了一個type屬性之後,問題就解決了

<button type="button">test1</button>

到這個時候才發現自己犯了一個很弱智的問題,<button> 標籤有一個預設的屬性是type="submit" 等於說如果你不自己手動覆蓋的話,每一個預設寫的button都是起到submit的作用,自然頁面就會重新整理。當加上type="button" 後,button就變為了一個普通的按鈕,需要加上onclick事件才會有相應的反應了。
雖然只是一個微不足道的小bug,但對html不熟的我來說確實是修改了很長一段時間,所以特此記錄下來,以防以後遇到相同的坑