表單一點擊提交按鈕(submit)必然跳轉頁面，如果表單的action為空也會跳轉到自己的頁面，即效果為刷新當前頁。 如下，可以看到一點擊提交按鈕，瀏覽器的刷新按鈕閃了一下： 如果想要阻止表單的預設提交事件，有以下幾種方法： 1.將<input>標簽內按鈕類型從type="submit"修改為typ ...
表單一點擊提交按鈕(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"為阻止表單提交事件
<!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>
