事件冒泡与阻止事件冒泡
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery1.42.min.js"></script>
<script type="text/javascript" src="js/jquery.SuperSlide.2.1.1.js"></script>
<style>
.pic{width:1000px;margin:50px auto;}
.pic li{list-style: none;float: left;width:200px;margin-right: 20px;}
.pic li img{width: 100%;}
.posi{display:none;width:500px;position: absolute;top:50px;left:318px;}
</style>
</head>
<body>
<div id="content" style="width:200px;height: 200px;background: #ccc;">
外层div
<span style="text-indent: 2em;display: block;background: red;">内层span元素</span>
外层div元素
</div>
<div id="msg" style="padding-bottom: 200px;"></div>
<script type="text/javascript">
$(function(){
//为span元素绑定click事件
$('span').bind('click',function(event){
var txt =$('#msg').html()+'<p>内层span元素被点击.</p>';
$('#msg').html(txt);
event.stopPropagation();
});
//为div绑定click事件
$('#content').bind('click',function(event){
var txt=$('#msg').html()+'<p>外层div元素被点击.</p>';
$('#msg').html(txt);
event.stopPropagation();
});
//为body事件绑定click事件
$('body').bind('click',function(){
var txt =$('#msg').html()+'<p>body元素被点击.</p>';
$('#msg').html(txt);
})
})
</script>
</body>
</html>
// 浏览器兼容性问题
使用jQuery给一个事件加处理方法时,为了阻止一个事件向上冒泡,使用了event.stopPropagation(),但在IE下却报对象不支持此属性或方法的错误(IE下是event. cancelBubble=true),jquery不是兼容各浏览器吗?
后来看了下jQuery的官方文档后,原来在使用event的时候,必须在事件处理方法中加入参数event,否则这个event为 window.event,而不是jQuery中的event。所以在jQuery定义事件处理方法时,最好加上参数event,如下:
- $('#btn').click(function(event){}) //推荐
- $('#btn').click(function(){}) //不推荐
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· SQL Server 内存占用高分析
· .NET Core GC计划阶段(plan_phase)底层原理浅谈
· .NET开发智能桌面机器人:用.NET IoT库编写驱动控制两个屏幕
· 用纯.NET开发并制作一个智能桌面机器人:从.NET IoT入门开始
· 一个超经典 WinForm,WPF 卡死问题的终极反思
· 支付宝事故这事儿,凭什么又是程序员背锅?有没有可能是这样的...
· 在线客服系统 QPS 突破 240/秒,连接数突破 4000,日请求数接近1000万次,.NET 多
· C# 开发工具Visual Studio 介绍
· 在 Windows 10 上实现免密码 SSH 登录
· C#中如何使用异步编程