jQuery 冒泡和默认事件:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://apps.bdimg.com/libs/jquery/1.7.2/jquery.js"></script>
<style>
div{
padding:20px;
border:1px solid gray;
}
.box1{
position:relative;
width:200px;
margin:50px auto;
background: red;
}
.box2{
background: green;
}
.box3{
background: blue;
}
.source{
color:white;
}
</style>
<script>
$(function(){
$('.box1').on('click',function(){
alert(1);
});
$('.box2').on('click',function(){
alert(2);
});
$('.box3').on('click',function(){
alert(3);
});
$('.source').on('click',function(){
alert("Hello,huanying2015!");
}); });
</script>
</head>
<body>
<div class="box1">
<div class="box2">
<div class="box3">
<a href="http://www.baidu.com" class="source" target="_blank">触发源</a>
</div>
</div>
</div>
</body>
</html>
运行结果:
在这里:
弹出3,弹出2,弹出1 这三个事件是冒泡事件;
页面跳转到 www.baidu.com 为默认事件
分别可以使用不同的方法来阻止这两种事件的发生
1.阻止冒泡事件,使用 stopPropagation() 函数来执行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://apps.bdimg.com/libs/jquery/1.7.2/jquery.js"></script>
<style>
div{
padding:20px;
border:1px solid gray;
}
.box1{
position:relative;
width:200px;
margin:50px auto;
background: red;
}
.box2{
background: green;
}
.box3{
background: blue;
}
.source{
color:white;
}
</style>
<script>
$(function(){
$('.box1').on('click',function(){
alert(1);
});
$('.box2').on('click',function(){
alert(2);
});
$('.box3').on('click',function(){
alert(3);
});
$('.source').on('click',function( event ){
alert("Hello,huanying2015!");
event.stopPropagation();
}); });
</script>
</head>
<body>
<div class="box1">
<div class="box2">
<div class="box3">
<a href="http://www.baidu.com" class="source" target="_blank">触发源</a>
</div>
</div>
</div>
</body>
</html>
运行结果:不会产生冒泡事件
2.阻止默认事件:
使用 preventDefault() 来执行;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://apps.bdimg.com/libs/jquery/1.7.2/jquery.js"></script>
<style>
div{
padding:20px;
border:1px solid gray;
}
.box1{
position:relative;
width:200px;
margin:50px auto;
background: red;
}
.box2{
background: green;
}
.box3{
background: blue;
}
.source{
color:white;
}
</style>
<script>
$(function(){
$('.box1').on('click',function(){
alert(1);
});
$('.box2').on('click',function(){
alert(2);
});
$('.box3').on('click',function(){
alert(3);
});
$('.source').on('click',function(event){
alert("Hello,huanying2015!");
event.preventDefault();
}); });
</script>
</head>
<body>
<div class="box1">
<div class="box2">
<div class="box3">
<a href="http://www.baidu.com" class="source" target="_blank">触发源</a>
</div>
</div>
</div>
</body>
</html>
运行结果:只会产生冒泡事件,不会执行默认跳转
3. 如果既要阻止冒泡事件,又要阻止默认事件,改怎么做呢?
3.1 把阻止默认事件和冒泡事件合并起来,即如下:
3.2 使用 return false 来阻止
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://apps.bdimg.com/libs/jquery/1.7.2/jquery.js"></script>
<style>
div{
padding:20px;
border:1px solid gray;
}
.box1{
position:relative;
width:200px;
margin:50px auto;
background: red;
}
.box2{
background: green;
}
.box3{
background: blue;
}
.source{
color:white;
}
</style>
<script>
$(function(){
$('.box1').on('click',function(){
alert(1);
});
$('.box2').on('click',function(){
alert(2);
});
$('.box3').on('click',function(){
alert(3);
});
$('.source').on('click',function(){
alert("Hello,huanying2015!");
return false;
}); });
</script>
</head>
<body>
<div class="box1">
<div class="box2">
<div class="box3">
<a href="http://www.baidu.com" class="source" target="_blank">触发源</a>
</div>
</div>
</div>
</body>
</html>
运行结果:不会产生冒泡事件,也不会产生默认事件