如何阻止標籤默認行爲和表單提交
阻止<a>標籤默認行爲
- 方式一 (經過return false)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>阻止事件的默認行爲</title>
<script type="text/javascript">
window.onload = function() {
var a = document.getElementById('mya');
a.onclick = function() {
alert(this.innerHTML);
/*經過return false; 實現阻止了點擊a標籤後,頁面的跳轉*/
return false;
}
}
</script>
</head>
<body>
<a href="http://www.baidu.com" id="mya">百度一下</a>
</body>
</html>
- 方式二 (經過javascript:; 或者 javascript:void(0);)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>阻止事件的默認行爲</title>
<script type="text/javascript">
window.onload = function() {
var a = document.getElementById('mya');
a.onclick = function() {
alert(this.innerHTML);
}
}
</script>
</head>
<body>
<a href="javascript:void(0);" id="mya">百度一下</a> <!--經過javascript:void(0)-->
</body>
</html>
表單提交
- 方式一 submit提交不驗證
<form action="/index">
<input type="text" />
<input type="submit" value="提交"/>
</form>
- 列表項目
阻止表單提交
有2種方式：
第一種：<form>提交事件
第二種：提交按鈕
- <form> 提交事件
// 不推薦，寫法不優雅
<form onsubmit="go(event)"></form>
<script>
function go(e){
e.preventDefault();
}
</script>
// 不推薦，由於沒法對錶單數據進行驗證 <form action="/register" method="post" onsubmit="return false;"></form>
// 推薦寫法
<form action="/register" method="post">
<input type="text" name="username" placeholder="請輸入註冊用戶名"><br />
<input type="password" name="pwd" placeholder="請輸入初始密碼"><br />
<input type="password" name="aginpwd" placeholder="請再次輸入密碼"><br />
<input type="submit" value="註冊" class="login_btn">
</form>
<script>
var form = document.forms[0],
submit = document.querySelector(".login_btn"),
inputBtn = document.getElementsByTagName("input");
form.onsubmit = function(e) {
e.preventDefault();
// return false; 也能夠阻止表單提交
}
</script>
- 提交按鈕
<input type="submit"/>
// 不推薦，由於沒法對錶單數據進行驗證
<form action="/register" method="post">
<input type="text" name="username" placeholder="請輸入註冊用戶名"><br />
<input type="password" name="pwd" placeholder="請輸入初始密碼"><br />
<input type="password" name="aginpwd" placeholder="請再次輸入密碼"><br />
<input type="submit" value="註冊" class="login_btn" onclick="return false">
</form>
// 不推薦，寫法不優雅
<form action="/register" method="post">
<input type="text" name="username" placeholder="請輸入註冊用戶名"><br />
<input type="password" name="pwd" placeholder="請輸入初始密碼"><br />
<input type="password" name="aginpwd" placeholder="請再次輸入密碼"><br />
<input type="submit" value="註冊" class="login_btn" onclick="nogo(event);">
</form>
<script>
function nogo(e){
e.preventDefault();
}
</script>
// 推薦寫法
<form action="/register" method="post">
<input type="text" name="username" placeholder="請輸入註冊用戶名"><br />
<input type="password" name="pwd" placeholder="請輸入初始密碼"><br />
<input type="password" name="aginpwd" placeholder="請再次輸入密碼"><br />
<input type="submit" value="註冊" class="login_btn">
</form>
<script>
var form = document.forms[0],
submit = document.querySelector(".login_btn"),
inputBtn = document.getElementsByTagName("input");
submit.onclick = function(e){
e.preventDefault();
// return false; 也能夠阻止表單提交
}
</script>
- 提交按鈕
<button>註冊</button>
// 不推薦，由於沒法對錶單數據進行驗證
<form action="/register" method="post">
<input type="text" name="username" placeholder="請輸入註冊用戶名"><br />
<input type="password" name="pwd" placeholder="請輸入初始密碼"><br />
<input type="password" name="aginpwd" placeholder="請再次輸入密碼"><br />
<button onclick="return false">註冊</button>
</form>
// 不推薦，寫法不優雅
<form action="/register" method="post">
<input type="text" name="username" placeholder="請輸入註冊用戶名"><br />
<input type="password" name="pwd" placeholder="請輸入初始密碼"><br />
<input type="password" name="aginpwd" placeholder="請再次輸入密碼"><br />
<button onclick="nogo(event);">註冊</button>
</form>
<script>
function nogo(e){
e.preventDefault();
}
</script>
// 推薦寫法
<form action="/register" method="post">
<input type="text" name="username" placeholder="請輸入註冊用戶名"><br />
<input type="password" name="pwd" placeholder="請輸入初始密碼"><br />
<input type="password" name="aginpwd" placeholder="請再次輸入密碼"><br />
<button class="login_btn" onclick="nogo(event);">註冊</button>
</form>
<script>
var form = document.forms[0],
submit = document.querySelector(".login_btn"),
inputBtn = document.getElementsByTagName("input");
submit.onclick = function(e){
e.preventDefault();
// return false; 也能夠阻止表單提交
}
</script>
相關文章
- 1. 如何阻止表單的默認提交事件
- 2. 如何阻止表單提交
- 3. 阻止默認行爲
- 4. js阻止默認行爲
- 5. 阻止默認的行爲
- 6. form表單的默認提交行爲
- 7. 如何阻止事件冒泡和默認行爲？
- 8. javascript如何阻止事件冒泡和默認行爲
- 9. Javascirpt 阻止表單提交
- 10. 事件的阻止冒泡和阻止默認行爲
- 更多相關文章...
- • MySQL默認值（DEFAULT） - MySQL教程
- • XSD 如何使用? - XML Schema 教程
- • TiDB 在摩拜單車在線數據業務的應用和實踐
- • IntelliJ IDEA 代碼格式化配置和快捷鍵
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 如何阻止表單的默認提交事件
- 2. 如何阻止表單提交
- 3. 阻止默認行爲
- 4. js阻止默認行爲
- 5. 阻止默認的行爲
- 6. form表單的默認提交行爲
- 7. 如何阻止事件冒泡和默認行爲？
- 8. javascript如何阻止事件冒泡和默認行爲
- 9. Javascirpt 阻止表單提交
- 10. 事件的阻止冒泡和阻止默認行爲