javascript冒泡事件

冒泡事件 专栏收录该内容
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>
  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值