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

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. HTML页面跳转的5种方法

    下面列了五个例子来详细说明,这几个例子的主要功能是:在5秒后,自动跳转到同目录下的hello.html(根据自己需要自行修改)文件.1) html的实现 <head> <!-- 以下 ...

  2. HTML5中新添加事件

    HTML5中新添加了很多事件,但是由于他们的兼容问题不是很理想,应用实战性不是太强,所以在这里基本省略,咱们只分享应用广泛兼容不错的事件,日后随着兼容情况提升以后再陆续添加分享.今天为大家介绍的事件主 ...

  3. jQuery基础_1

    jQuery事件的因果关系是怎么样的一个格式: $("button").click(function(){ }); [正式接触jQuery] (1)jQuery的书写步骤: 1.引 ...

  4. 关于hover

    要想实现a:hover b{} 得到样式的话,a必须是b的父元素

  5. javascript code snippet -- 保留小数点位数

    js1.5以上可以利用toFixed(x) ,可指定数字截取小数点后 x位 for example : //round "original" to two decimals var ...

  6. Fragment要点复习

    做系统时间久了,应用层的很多东西都忘了,但是基础还是得巩固,下面对fragment相关的知识点简单整理一下. 一.fragment的引入 fragment是从Android3.0(API level ...

  7. 日常工作中的点滴:C# 根据字节长度截包含中文的字符串

    方法中利用正则表达式判断某个字符是否是中文 public string SubStringB(string text,int length){ int target=0; int b=0; for(i ...

  8. Introduction ch3

    [1] Don’t reinvent the wheel; use libraries.[2] Don’t believe in magic; understand what your librari ...

  9. 测试架构图 High Level 产品技术（无事来更新，证明这个博客还是Live的）

    一个完整的产品测试所需要掌握的产品技术架构. 1.最底层硬件平台(服务器与存储) 对于一个大型商业解决方案来说,性能与可靠性是非常重要的要求,那么服务器与存储就是专门来满足需求的. 服务器: 服务器端 ...

  10. jsti 和EL用法注意点

    今天使用stl 结合El做jsp页面展现,出现了个问题,怎么调也调不好,最后将jstl的源码拿来跟踪调了一下才明白其中的道理. 在使用jstl tag <c:forEach var=" ...