如下图所示，灰色块包含红色块，假设我们为灰色和红色块各绑定一个单击弹框事件，当我们点击红色块时，不希望触发灰色块的弹框事件，这就需要阻止冒泡事件了。

IE里阻止冒泡事件使用cancelBubble属性，如果事件句柄想阻止事件传播到包容对象，必须把该属性设为 true。

火狐等非IE浏览器阻止冒泡事件使用stopPropagation()方法。调用该方法后，该节点上处理该事件的处理程序将被调用，事件不再被分派到其他节点。

我们看代码实例：

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>事件对象--阻止事件冒泡</title>

</head>

<body>

    <div id="gray" style="background:#ddd;width:400px;height:400px;">

        <div id="red" style="background:#FF0000;width:200px;height:200px;"></div>

    </div>

    <script>

        var oGray=document.getElementById("gray");

        var oRed=document.getElementById("red");

        oGray.onclick=function(){

            alert("点击了灰色块！");

        }

        oRed.onclick=function(e){

            alert("点击了红色块！");

            var event=e||window.event;

            //阻止冒泡事件,否则会触法oGray.onclick方法

            if(document.all){

                //IE

                event.cancelBubble=true;//如果事件句柄想阻止事件传播到包容对象，必须把该属性设为 true

            }else{

                //FF,Chrome

                event.stopPropagation();//不再派发事件

            }

        }

    </script>

</body>

</html>

javascript里阻止事件冒泡的更多相关文章

  1. javascript如何阻止事件冒泡和默认行为

    阻止冒泡:    冒泡简单的举例来说,儿子知道了一个秘密消息,它告诉了爸爸,爸爸知道了又告诉了爷爷,一级级传递从而以引起事件的混乱,而阻止冒泡就是不让儿子告诉爸爸,爸爸自然不会告诉爷爷.下面的demo ...

  2. JavaScript事件冒泡机制和阻止事件冒泡及默认事件

    一.阻止事件冒泡: 1.html中加return false 2.js中加return false 3.IE下:window.event.cancelBubble = true:  FF下:event ...

  3. javascript阻止事件冒泡的兼容写法及其相关示例

    //阻止事件冒泡的兼容写法 function stopBubble(e){ //如果提供了事件对象,则是一个非IE浏览器 if(e && e.stopPropagation) //因此 ...

  4. JavaScript 阻止事件冒泡的实现方法

    JavaScript 阻止事件冒泡,无使用其它插件来辅助,原生JS代码,考虑到浏览器的兼容性问题,这里对IE/火狐.Operating以及Chrome都有针对性的判断,代码如下: function c ...

  5. JAVAscript——菜单下拉列表练习(阻止事件冒泡)

    下拉列表框,鼠标点击文本框,出现下拉,鼠标(离开的时候或者点击网页其他位置时)下拉列表消失.鼠标放到下拉列表的某一项上变背景色,点击下拉列表的某一项将该项的值显示在文本框内,然后下拉列表消失. < ...

  6. JavaScript阻止事件冒泡（兼容IE、Chrome、FF）

    这里仅仅是一个简单代码demo,因为时间问题并未做深入研究,因为今天做项目时要用到阻止事件冒泡的内容,找了好多才找到一个可以使用的,特记录之. <!DOCTYPE HTML> <ht ...

  7. javascript 阻止事件冒泡 cancelBubble

    javascript简单的阻止事件冒泡,可以使用事件的cancelBubble方法为true: html部分 <button id="btn1">点击显示div< ...

  8. javascript - 事件详解（阻止事件冒泡+阻止事件行为）

    一.事件流 1.事件流 描述的是在页面中接受事件的顺序 2.事件冒泡 由最具体的元素接收,然后逐级向上传播至最不具体的元素的节点 (最具体 –> 最不具体) 3.事件捕获 最不具体的节点先接收事 ...

  9. javascript阻止事件冒泡和浏览器的默认行为

    1.阻止事件冒泡,使成为捕获型事件触发机制. 1 function stopBubble(e) { 2 //如果提供了事件对象,则这是一个非IE浏览器 3 if ( e && e.st ...

随机推荐

  1. Struts2之提交对象数组至后台

    struts2中有许多很好的特性,比如在设置好getter和setter方法后,加上前端的匹配设置,后台即可自动将前端输入的数据转换为后台的相应的对象. 如现在传入一个Person类的对象,其中Per ...

  2. JS 前端格式化JSON字符串工具

    JSON格式化工具,简易实现.作为技术宅,直接上代码,供大家使用.前提:一定要引入jquery哦. <!DOCTYPE html> <html lang="en" ...

  3. svn不能添加.a文件的解决方法

    上次说用svn add命令添加.a文件,下面是另外的一种解决办法: 修改~/.subversion/config文件,增加一条 # global-ignores = *.o *.lo *.la *.a ...

  4. Bootstrap自带的一些预定义的按钮颜色

    浅蓝色 btn-info 被用在那些用户可能会采取的操作上. 红色btn-danger被用来提醒用户该操作具有“破坏性”,例如删除一张猫的图片.

  5. SqlIO优化

    1SqlIO优化 set statistics io on--sqlset statistics io off 2Sql占用CPU时间 select c.total_worker_time, c.la ...

  6. 黑马程序员－循环引用问题和weak

    使用weak reference(弱引用)来避免retain cycle 对一个对象发送retain消息会创建对这个对象的强引用(strong reference).如果两个对象都有一个强引用指向对方 ...

  7. [转]Android开发：Parallax效果的ScrollerView，改编自ParallaxListView

    https://github.com/nirhart/ParallaxScroll这个gethub上的地址 本文转自http://www.2cto.com/kf/201502/376970.html ...

  8. mysql获取所有分类的前n条记录的两种方法浅析

      项目中有个需求是获取出展会分类下的前n条展商. 刚开始的思路是用group by 获取出展会的分类,后面再根据分类获取该分类下的n个展商,但也需要第一次获取出展会的时候也获取所有的每个展会分类下的 ...

  9. Android 适配2

    Android AutoLayout全新的适配方式 堪称适配终结者 转载请标明出处: http://blog.csdn.net/lmj623565791/article/details/4999094 ...

  10. 5.webService拦截器

    CXF为什么要设计拦截器? 为了在webservice请求过程中,能动态操作请求和响应数据, CXF设计了拦截器. 拦截器分类 1.按所处的位置分:服务器端拦截器,客户端拦截器 2.按消息的方向分:入 ...