事件的默认行为
在浏览器的各种事件中,有一部分事件是自带默认行为的。比如超链接元素被点击后,会跳转到对应的网页,这就是它的默认行为。这种行为是可以被取消的,通过事件对象的preventDefault()
函数。
1
2
3
4
5
6
7
8
9
10
|
<a href="http://baidu.com">jump to baidu website</a>
<script>
var a = document.querySelector("a");
a.addEventListener("click", function(event) {
// a元素被点击后,不会再有跳转行为了
event.preventDefault();
console.log("a元素被点击了");
});
</script>
|
超链接元素还有另一个功能:点击后页面滑动到对应的锚点位置。这个功能也是默认行为,也可以被取消掉
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
<style>
div {
height: 800px;
}
#div1 {
background-color: rgb(62, 138, 236);
}
#div2 {
background-color: darkorange;
}
</style>
<a href="#div2">jump to baidu div2</a>
<div id="div1"></div>
<div id="div2"></div>
<script>
var a = document.querySelector("a");
a.addEventListener("click", function(event) {
// a元素被点击后,页面没有自动跳转到指定锚点位置
event.preventDefault();
console.log("a元素被点击了");
});
</script>
|
表单中的提交按钮也自带跳转页面的默认行为,同样可以使用event.preventDefault()
取消。
1
2
3
4
5
6
7
8
9
10
11
12
|
<form action="./demo01.html" , method="GET">
<input type="text" name="age" value="20" />
<button>提交表单</button>
</form>
<script>
var btn = document.querySelector("button");
btn.addEventListener("click", function(event) {
// button元素被点击后,不会再有跳转行为了
event.preventDefault();
console.log("提交按钮被点击了");
});
</script>
|
不能取消默认行为的事件
当事件发生时,传递给侦听函数的事件对象中有一个cancelable
属性,用来判断该事件的默认行为是否能被取消,true
表示可以被取消,false
表示不能被取消。
前面超链接的默认行为和表单按钮的默认行为都是可以取消的,所以它们事件对象的cancelale
属性值是true
,而wheel(滚轮)
事件的默认行为是不能取消的,这个事件对象的cancelable
属性值为false
,如果强行对不能取消默认行为的事件使用event.preventDefault()
方法,浏览器会抛出错误。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<a href="http://baidu.com">jump to baidu website</a>
<script>
var a = document.querySelector("a");
a.addEventListener("click", function(event) {
console.log("click事件的默认行为是否能被取消:", event.cancelable);
// 超链接不会跳转页面了
event.preventDefault();
});
window.addEventListener("wheel", function(event) {
console.log("wheel事件的默认行为是否能被取消:", event.cancelable);
// 强行取消浏览器会抛出错误
event.preventDefault();
});
</script>
|