讲解如何使用JavaScript阻止事件冒泡和默认行为
-
-
- 一、事件冒泡
- 二、默认行为
-
在说事件冒泡之前,我们先说说事件对象(Event)
Event
1、在触发DOM上某个事件时,会产生一个事件对象event,这个对象包含着所有事件有关的信息(导致事件的元素、事件的类型、与特定事件相关的信息)
2、所有浏览器都支持Event对象,但支持方式不同
3、IE中的事件对象:window.event
一、事件冒泡
什么是事件冒泡
即事件开始时由最具体的元素(文档中嵌套最深的那个元素)接收,然后逐级向上传播到较不为具体的节点
所有浏览器都支持事件冒泡
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>事件冒泡</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style>
.one{
width:400px;
height:100px;
border:1px solid #333;
}
.two{
height:35px;
line-height:35px;
padding-left:15px;
border:1px solid red;
}
.three{
padding:10px;
background-color: green;
border:1px solid #999;
cursor:pointer;
}
</style>
<script src = "http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script>
$(function(){
$(".one").click(function(event) {
alert($(this).text());
});
$(".two").click(function(event) {
alert($(this).text());
});
$(".three").click(function(event) {
alert($(this).text());
});
});
</script>
</head>
<body>
<div class="one">
我是one(div)
<p class="two">
我是two(p)
<span class="three">我是three(span)</span>
</p>
</div>
</body>
</html>
当在span、p、div元素上各绑定一个click事件,当单击span元素时,会依次触发三个事件,即span、p、div元素上的click事件,这就是事件冒泡,按照DOM层次结构像水泡一样不断向上直至顶端
阻止事件冒泡
DOM中提供stopPropagation()
方法,但IE不支持,使用event 对象直接在事件函数中调用就行
IE中提供的是,cancelBubble
属性,默认为false,当它设置为true时,就是阻止事件冒泡,也是用event对象在事件函数中调用
阻止冒泡函数
function stopPropagation(e) {
e = e || window.event;
if(e.stopPropagation) { //W3C 阻止冒泡方法
e.stopPropagation();
} else {
e.cancelBubble = true; //IE 阻止冒泡方法
}
}
document.getElementById('need_hide').onclick = function(e) {
stopPropagation(e);
}
jQuery中提供了stopPropagation()方法来停止事件冒泡,当需要时,只需用用event对象来调用就行,即event.stopPropagation();
二、默认行为
什么是默认行为
网页元素,都有自己的默认行为,例如,单击超链接会跳转…
阻止默认行为
DOM中提供preventDefault()
方法来取消事件默认行为,但是只有当cancelable属性设置为true的事件,才可以使用preventDefault()来取消事件默认行为,使用event对象在事件函数中调用就行
IE中提供的是returnValue
属性,默认为true,当它设置为false
时,就是取消事件默认行为,也是用event对象在事件函数中调用
阻止默认行为函数
function preventDefaultAction(e) {
e = e || window.event;
if(e.preventDefault) { //W3C方法
e.preventDefault();
}else { //IE方法
e.returnValue = false;
}
}
jQuery中提供了preventDefault()
方法来阻止元素的默认行为,只需要用event对象来调用即可,即
event.preventDefault()
如果想同时对事件对象停止冒泡和默认行为,可以在事件处理函数中返回false。
这是对事件对象同时调用stopPropagation()方法和preventDefault()方法的一种简写方式
阻止事件冒泡和默认行为综合实例
可自己逐步调试,查看效果,加深印象
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>阻止事件冒泡和默认行为</title>
</head>
<style type="text/css">
.one {
width: 200px;
height: 200px;
background: navajowhite;
}
.two {
height: 40px;
border: 1px solid red;
background: white;
line-height: 40px;
}
.three {
cursor: pointer;
/*padding: 10px;*/
background: red;
}
.defauleAction {
width: 100px;
height: 100px;
border: 1px solid red;
line-height: 100px;
}
.four {
width: 200px;
height: 200px;
background: navajowhite;
margin-top: 20px;
}
.five {
height: 40px;
border: 1px solid red;
background: white;
line-height: 40px;
}
.six {
cursor: pointer;
/*padding: 10px;*/
background: red;
</style>
<body>
<div class="one">我是最外层
<p class="two">我是第二层
<span class="three">我是最里层</span>
</p>
</div>
<!--阻止链接自动跳转的默认行为-->
<div class="defaultAction">
<a href="https://blog.****.net/qq_36595013">我的博客主页</a>
</div>
<!--同时阻止冒泡事件和默认行为-->
<div class="four">我是最外层
<p class="five">我是第二层
<span class="six"><a href="https://blog.****.net/qq_36595013">我是最里层</a></span>
</p>
</div>
</body>
<script type="text/javascript" src="../jQuery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function(){
$(".one").click(function(e) {
alert($(this).text());
});
$(".two").click(function(e) {
preventPropagation(e);
alert($(this).text());
});
$(".three").click(function(e) {
/*一、先在最里层添加进阻止事件冒泡函数,再查看效果
*发现点击中间层的时候还是会冒泡到最外层
* 然后再中间层加入阻止函数,再查看效果
*/
preventPropagation(e);
alert($(this).text());
});
//阻止默认单击链接跳转行为
$(".defaultAction>a").click(function(e) {
preventDefaultAction(e);
alert("链接不跳转了吧!");
});
//阻止事件冒泡函数
function preventPropagation(e) {
e = e||window.event;
if(e.stopPropagation) { //W3C方法
e.stopPropagation();
}else { //IE方法
e.cancelBubble = true;
}
}
//阻止默认行为函数
function preventDefaultAction(e) {
e = e || window.event;
if(e.preventDefault) { //W3C方法
e.preventDefault();
}else { //IE方法
e.returnValue = false;
}
}
//同时阻止默认行为和事件冒泡
$(".six").click(function() {
alert("点我之后既不向上冒泡又不跳转到默认的链接");
//要想同时阻止默认行为和事件冒泡,只需要返回return false就可以了
return false;
});
$(".five").click(function(e) {
preventPropagation(e);
alert("我是中间层");
});
$(".four").click(function() {
alert("我是最外层");
});
});
</script>
</html>