什么是冒泡？
点击一个click事件的时候当前的click事件执行完成之后外面的click事件也会执行这种就是冒泡事件。
怎么阻止冒泡？
阻止冒泡事件也是阻止默认行为。可以用event.preventDefault()这个函数;
不想阻止，就想停掉;
可以用event.stopPropagation()或者return false;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>我的顺丰</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>
<style>
#content{border: 1px solid red;}
#msg{border:1px solid #0000FF;margin: 2rem ;}
</style>
</head>
<body class="wrapper">
<div id="content">
外层div元素
<span>内层span元素</span>
</div>
<div id="msg"></div>
</div>
</body>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(function(){
//为span元素绑定click事件
$('span').bind('click', function (event) {
var txt = $('#msg').html() + '<p>内层span元素被点击</p>';
$('#msg').html(txt);
alert(1);
return false;
});
//为span元素绑定click事件
$('#content').bind('click', function (event) {
var txt = $('#msg').html() + '<p>外层div元素被点击</p>';
$('#msg').html(txt);
alert(2);
});
//为span元素绑定click事件
$('body').bind('click', function (event) {
var txt = $('#msg').html() + '<p>body元素被点击</p>';
$('#msg').html(txt);
alert(3);
});
});
</script>
</html>
javascript冒泡事件
猜你喜欢
转载自wyr123789.iteye.com/blog/2357488
今日推荐
周排行