表單一點擊提交按鈕(submit)必然跳轉頁面,如果表單的action為空也會跳轉到自己的頁面,即效果為刷新當前頁。
如下,可以看到一點擊提交按鈕,瀏覽器的刷新按鈕閃了一下,如果想要阻止表單的默認提交事件,有以下幾種方法:
1.將<input>標簽內按鈕類型從type="submit"修改為type="button"
2.表單內的<button>未指定類型時,默認的類型為submit,可以顯式的修改為<button type="button">來阻止表單提交
3.利用preventDefault()方法:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
function func(event){
event.preventDefault();
}
</script>
</head>
<body>
<form action="">
<input type="submit" value="button" οnclick="func(event)" />
</form>
</body>
</html>
4.用onclick點擊事件來return false
講一下表單提交按鈕onclick事件:
οnclick="return true" 為默認的表單提交事件
οnclick="return false"為阻止表單提交事件
而一般用onclick來調用函數都是沒有返回值的,所以一般調用完成后為默認return true;所以才會看到,先處理回調函數后再進行表單提交跳轉。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
function func(){
return false;
}
</script>
</head>
<body>
<form action="">
<input type="submit" value="button" οnclick="return func()" />
<!--注意是onclick內是return func();而不是簡單的調用func()函數-->
</form>
</body>
</html>
5.利用表單的onsubmit事件
注意:onsubmit事件的作用對象為<form>,所以把onsubmit事件加在提交按鈕身上是沒有效果的。
form對象的onsubmit事件類似onclick,都是先處理調用的函數,再進行表單是否跳轉布爾值的判斷
οnsubmit="return true" 為默認的表單提交事件
οnsubmit="return false"為阻止表單提交事件
廣州vi設計公司 http://www.maiqicn.com 我的007辦公資源網 https://www.wode007.com
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
function func(){
return false;
}
</script>
</head>
<body>
<form action="" οnsubmit="return func()">
<input type="submit" value="button" />
</form>
</body>
</html>