事件有属性，还有方法，还有事件。事件本身是个对象^_^
事件的preventDefault()方法改变默认行为，在事件发生前阻止，不让其发生。这样的应用场景有很多，常见表单验证，如必填字段不能为空。
示例1，阻止链接
<body>
<p>DOM使用preventDefault()方法，IE5~IE8使用returnValue</p>
<p><a href="http://www.baidu.com/">去百度</a></p>
<p><a href="http://www.baidu.com" id="gotobaidu">去百度，将被阻止</a></p>
<script>
var gotobaidu=document.getElementById("gotobaidu");
gotobaidu.addEventListener('click',stop,false);
function stop(e) {
if(e.preventDefault){
e.preventDefault();
}else{
window.event.returnValue=false;
}
}
</script>
</body>
示例2，阻止表单提交
<body>
<p>DOM使用preventDefault()方法，IE5~IE8使用returnValue</p>
<form id="myform" action="http://www.baidu.com/" method="get">
用户名：<input type="text" id="username" name="username">
<button type="submit">提交</button>
</form>
<script>
var myform = document.getElementById('myform');
myform.addEventListener('submit', stop, false);
function stop(e) {
var username = document.getElementById('username');
// alert(username.value);
if (username.value === '') {
//要求输入内容
alert("请输入用户名");
// 阻止
if (e.preventDefault) {
e.preventDefault();
} else {
window.event.returnValue = false;
}
}
}
</script>
</body>
事件有属性，还有方法，还有事件。事件本身是个对象^_^
事件的preventDefault()方法改变默认行为，在事件发生前阻止，不让其发生。这样的应用场景有很多，常见表单验证，如必填字段不能为空。
示例1，阻止链接
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
<!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
>
<
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，阻止表单提交
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
|
<!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
>
用户名：<
input
type
=
"text"
id
=
"username"
name
=
"username"
>
<
button
type
=
"submit"
>提交</
button
>
</
form
>
<
script
>
var myform = document.getElementById('myform');
myform.addEventListener('submit', stop, false);
function stop(e) {
var username = document.getElementById('username');
// alert(username.value);
if (username.value === '') {
//要求输入内容
alert("请输入用户名");
// 阻止
if (e.preventDefault) {
e.preventDefault();
} else {
window.event.returnValue = false;
}
}
}
</
script
>
</
body
>
</
html
>
|