事件冒泡与阻止事件冒泡

<!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,如下:

  1. $('#btn').click(function(event){})  //推荐  
  2. $('#btn').click(function(){})  //不推荐  
 
posted @   wangmei  阅读(320)  评论(0编辑  收藏  举报
(评论功能已被禁用)
编辑推荐:
· 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#中如何使用异步编程
点击右上角即可分享
微信分享提示