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

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. python脚本执行Scapy出现IPv6警告WARNING解决办法

    安装完scapy,写了脚本执行后执行: WARNING: No route found for IPv6 destination :: (no default route?) 原因是用 from sc ...

  2. 使用内存虚拟硬盘 提高ArcGIS server并发性能的一种方法

    1 问题提出 1.1 概述 提高ArcGIS server并发性能的方法很多,本文讨论在用户硬件足够强大的情况下(主要是内存足够大),使用内存模拟硬盘来提高数据的读取效率,以达到提高ArcGIS se ...

  3. Ubuntu MYSQL和Windows MYSQL （非C盘安装）

    1.Ubuntu 默认安装 Mysql 5.6版本以上: 1.查看系统是否安装mysql 数据库: sudo netstat -tap | grep mysql 如果安装了,就查看一下版本命令: my ...

  4. AngularJS 页面基本操作

    一.避免预先加载angular模板语法 <style> [ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, ...

  5. vs调试断点进不去的解决办法

    原创文章,禁止转载. 断点进不去的解决办法:  确认是debug版本  确认生成了调试信息  确认在编译和连接的工程配置中指定了相同的匹配的pdb文件名,而不是默认的vc100.pdb等名字(无关) ...

  6. 使用CTex完成北京科技大学本科生毕业设计

    var appInsights=window.appInsights||function(config){ function r(config){t[config]=function(){var i= ...

  7. Python 学习---------Ｄay5

    第十四章 文档 class employee: "class doumentation" pass print employee.__doc__ #注释会保存在__doc__属性中 ...

  8. JS与Jquery学习笔记（一）

    一. Javascript的作用域,大坑! 1. JS作用域奇怪表现之一:预编译 在其他的语言里我们如果使用一个变量在声明其之前,是会报错的,但是在js里面却不一定,比如: function f1() ...

  9. Changing the Color of Linux ls Command 改变Linux的ls命令显示的颜色

    Linux command ls basically use the file /etc/DIR_COLORS or /etc/DIR_COLORS.xterm to define the color ...

  10. i love matlab

    新手上路~话说图像修复熟么的真的很有意思~忽的想起NG讲的一个笑话:它让我赚了很多钱,买了车子,买了房子,so what's that? It's Matlab <(￣3￣)> 前两天一直 ...