码迷,mamicode.com
首页 > 编程语言 > 详细

JavaScript&jQuery.preventDefault()

时间:2018-07-10 16:48:53      阅读:169      评论:0      收藏:0      [点我收藏+]

标签:htm   color   bsp   ntb   com   cer   doc   asc   style   

使用事件的preventDefault()方法改变默认行为


 

事件有属性,还有方法,还有对象。事件本身是个对象。

事件的preventDefault()方法改变默行为,在事件发生前阻止,不让其发生。这样的应用场景有很多,常见表单验证,如必填字段不能为空。

 

示例1:

<!DOCTYPE html>
<html>
<head>
<title>改变默认行为</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<p>DOM使用preventDefault()方法,IE5~IE8使用returnValue</p>
<p><a href="http://www.163.com">去网易</a></p>
<p><a href="http://www.163.com" id="goto163">去网易,将被阻止</a></p>

<script>
var goto163 = document.getElementById(‘goto163‘);

goto163.addEventListener(‘click‘, stop, false);

function stop(e) {
if (e.preventDefault) {
e.preventDefault();
} else {
window.event.returnValue = false;
}
}

</script>
</body>
</html>


示例2:阻止表单提交

<!DOCTYPE html>
<html>
<head>
<title>阻止表单提交</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<form id ="myform" action="http://www.163.com/" method="get">
<input type="text" id="username" name="ucername">
<button type="submit">提交</button>
</form>
<script>
var myform = document.getElementById(‘myform‘);

myform.addEventListener(‘submit‘,stop,false);

function stop(e) {
var username = document.getElementById(‘username‘);
if(username.value === ‘‘){
alert("请输入内容");
if (e.preventDefault){
e.preventDefault();
}else{
window.event.returnValue = false;
}
}
}
</script>
</body>
</html>

 

JavaScript&jQuery.preventDefault()

标签:htm   color   bsp   ntb   com   cer   doc   asc   style   

原文地址:https://www.cnblogs.com/H97042/p/9289767.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!