javascript冒泡事件

最新推荐文章于 2024-07-08 08:31:14 发布

iteye_2837

最新推荐文章于 2024-07-08 08:31:14 发布

阅读量196

点赞数

分类专栏：冒泡事件文章标签：冒泡事件

本文链接：https://blog.csdn.net/iteye_2837/article/details/82679104

版权

冒泡事件专栏收录该内容

1 篇文章 0 订阅

订阅专栏

什么是冒泡？
点击一个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>