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

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. 升级react 15.4，常见的错误及解决方案

    最近项目由react0.14.X升级到react 15版本,因为react15还是做了一些相对大一点的更新的(详情可以参考一下我的另一篇文章关于react15的一点总结),相对:来说react升级之后 ...

  2. eclipse js 引用跳转

    引用 http://stackoverflow.com/questions/24505993/the-resource-is-not-on-the-build-path-of-a-javascript ...

  3. windows10 technical preview 无法激活

  4. iOS 设置视图半透明而子控件不透明

    用一张半透明的图片做背景 使用colorWithWhite:alpha:方法  white后面的参数表示灰度,从0-1之间表示从黑到白的变化,alpha就是你想调整的透明度 bgView.backgr ...

  5. hdu 1394 Minimum Inversion Number（树状数组）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1394 题意:给你一个0 — n-1的排列,对于这个排列你可以将第一个元素放到最后一个,问你可能得到的最 ...

  6. Windows环境下使用Clover四叶草引导双硬盘安装OSX 10.11.5原版镜像

    作为一个穷逼大学生,想搞iOS开发 买不起Mac只能鼓捣鼓捣黑苹果啦........ 之前我的电脑通过变色龙引导的方式装了个OSX10.10和win8.1双系统,因为自学的是Swift语言之前装的OS ...

  7. 一款免费支持PDF、word、excel、PPT、jpeg之间互转线上软件

    偶然发现的一款免费支持PDF.word.excel.PPT.jpeg之间互转,支持合并pdf.加密解密PDF的线上软件,首先声明,不是广告党,我自己试用过,确实是目前我用过最好用的,如果有朋友有更好的 ...

  8. 小游戏runpig总结

    前几天写了一个JavaScript小游戏,大概是这样的 demo:strongfanfan.top/RunPig  源代码:www.github.com/strongfanfan/RunPig 画风简 ...

  9. JAVA 求和程序

  10. mysql 条件统计

    问题描述为使讨论简单易懂,我将问题稍作简化,去掉诸多的背景. 从前有一个皇帝,他有50个妃子,这些妃子很没有天理的给他生了100,000个儿子,于是,皇帝很苦恼,海量的儿子很难管理,而且,他想知道每个 ...