首先解释一下事件冒泡神什么，

在js中，假如在div中嵌套一个div

如

<style type="text/css">

    #box1{width:500px;height:500px;background:#900;}

     #box2{width:400px;height:400px;background:#090;}

      #box3{width:300px;height:300px;background:#009;}

       #box4{width:200px;height:200px;background:#990;}

        #box5{width:100px;height:100px;background:#099;}

</style>

<body>

<div id="box1">

    <div id="box2">

       <div id="box3">

                <div id="box4">

                       <div id="box5">

                       </div>

                </div>

       </div>

    </div>

</div>

</body>

当你用onclick事件时，当你点击id=‘box4’的div，事件会一直传递到box3，box2，box1，html

这就叫事件的冒泡，有时候不需要冒泡，所以会阻止冒泡。

<script>

    window.onload =function()

    {

        var $=function(_id){return document.getElementById(_id);}

        document.onclick=function()

        {

            alert("点击的document");

        }

        document.body.onclick=function()

        {

             alert("点击的body");

        }

        $("box1").onclick=function()

        {

            alert("你点击的id为："+this.id +"的div");

        }

         $("box2").onclick=function()

        {

            alert("你点击的id为："+this.id +"的div");

        }

         $("box3").onclick=function(e)

        {

            e=window.event || e;  //IE支持的是windows事件，而标准e事件是chromo额firefox支持

            e.stopPropagation();  //阻止冒泡的方法，而ie不支持這个方法，但支持cancelBubble属性

            alert("你点击的id为："+this.id +"的div");

        }

         $("box4").onclick=function(e)

        {

            //全浏览器兼容的阻止冒泡

            e=e ||window.event ;

            e.stopPropagation?(stopPropagation()):(e.cancelBubble=true);

            alert("你点击的id为："+this.id +"的div");

        }

         $("box5").onclick=function()

        {

            alert("你点击的id为："+this.id +"的div");

        }

    }

 </script>

firefox，chrome中用的是

stopPropagation()函数来阻止冒泡

ie用的是cancelBubble=ture；這个属性来阻止冒泡

js时间冒泡，阻止事件冒泡的更多相关文章

  1. javascript的事件冒泡,阻止事件冒泡和事件委托， 事件委托是事件冒泡的一个应用。

    首先,弄明白js 当中,什么是事件,事件模型在js中是如何设计的.什么是事件冒泡? 什么是“事件冒泡”呢?假设这里有一杯水,水被用某种神奇的方式分成不同颜色的几层.这时,从最底层冒出了一个气泡,气泡会 ...

  2. 事件冒泡 & 阻止事件冒泡

    事件冒泡 : 当一个元素接收到事件的时候,会把他接收到的所有传播给他的父级,一直到顶层window.事件冒泡机制 阻止冒泡 : 当前要阻止冒泡的事件函数中调用 event.cancelBubble = ...

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

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

  4. JS阻止事件冒泡

    在使用JS事件的时候,外层元素事件有可能被里层元素的事件触发,例如点击里层元素外层也触发了点击,这种现象称为事件冒泡.(李昌辉) <div id="wai"> < ...

  5. js阻止冒泡及jquery阻止事件冒泡示例介绍

    js阻止冒泡 在阻止冒泡的过程中,W3C和IE采用的不同的方法,那么我们必须做以下兼容. 复制代码 代码如下: function stopPro(evt){ var e = evt || window ...

  6. js区分鼠标单双击 阻止事件冒泡

    function clickOrDblClick(obj) { count++; if (obj != undefined) { var rowStr = $.trim($(obj).find(&qu ...

  7. js之阻止事件冒泡(待修改)和阻止默认事件

    阻止默认事件(event.stopPropagation()): <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional// ...

  8. JS如果阻止事件冒泡和浏览器默认事件

    原地址:http://missra.com/article/web-57.html 嵌套的标签元素,如果父元素和子元素都绑定了一些事件,那么在点击最内层子元素时可能会触发父级元素的事件,下面介绍一下J ...

  9. js阻止事件冒泡的两种方法

    1.什么是JS事件冒泡 在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这 ...

  10. js阻止浏览器、元素的默认事件与js阻止事件冒泡、阻止事件流

    嵌套的div元素,如果父级和子元素都绑定了一些事件,那么在点击最内层子元素时可能会触发父级元素的事件,下面介绍一下js阻止默认事件与js阻止事件冒泡示例,大家参考使用吧   1. event.prev ...

随机推荐

  1. MySQL运行出错：无法连接驱动、无root访问权限解决办法

    按照疯狂java讲义的13.3的程序,发现程序运行出错. 1.点开runConnMySql.cmd运行文件,出现如下结果: 2.用Editplus进行编译运行,如下结果: 报错定位到程序第18行,而第 ...

  2. SVN switch 用法详解

    一直知道SVN有个switch命令,但是对它的介绍教程却很少,大多是生硬的svn帮助文档里的文字,从而一直不怎么会用.今天看了这篇文章,突觉豁然开朗,整理下来以备查阅. 使用SVN,自然是需要与别人合 ...

  3. 2014 年10个最佳的PHP图像操作库

    2014 年10个最佳的PHP图像操作库   Thomas Boutell 以及众多的开发者创造了以GD图形库闻名的一个图形软件库,用于动态的图形计算. GD提供了对于诸如C, Perl, Pytho ...

  4. PHP 打印调用函数入口地址(堆栈)

    今天网站出现一个BUG,然后直接在数据库类里面写日志,看是哪条SQL出了问题,SQL语句到是找到了,但是不知道这条SQL语句来自何处,于是就想啊,如果能有一个办法,查看当前正在运行的这个方法是被哪个方 ...

  5. Redis几个认识误区(转)

    此文的作者是新浪微博平台架构师杨卫华(timyang)大师,如果关注了新浪一些牛人微博的同学应该知道,timyang前段时间正在对Redis进行一些研究和测试,也分享出了不少成果.下面一篇文章相信是t ...

  6. C++ 类的动态组件化技术

    序言: N年前,我们曾在软件开发上出现了这样的困惑,用VC开发COM组件过于复杂,用VB开发COM组件发现效率低,而且不能实现面向对象的很多特性,例如,继承,多态等.更况且如何快速封装利用历史遗留的大 ...

  7. 动态WebService方法

    [转] 调用Webservice的方法一般是通过右击项目-->添加服务引用-->输入Webservice地址-->前往-->确定,这样可以顺利调用服,但是需要注意的一点是:如果 ...

  8. ImageLoader_ _Universal-Image-Loader完全解析(一)之介绍与使用详解

    转载请标明出处: http://blog.csdn.net/developer_jiangqq/article/details/50439814 本文出自:[江清清的博客] (一).前言: 已经半个月 ...

  9. 使用thinkphp连接sqlserver数据库时提示“系统不支持:sqlsrv”

    习惯了使用php跟mysql组合,现在接到项目需要调用客户线下的系统软件的数据,具了解,这个软件的数据库是用sqlserver数据库也就是常说的mssql数据库了. 那么我现在需要用PHP连接sqls ...

  10. 深入ThreadLocal之三（ThreadLocal可能引起的内存泄露）

    threadlocal里面使用了一个存在弱引用的map,当释放掉threadlocal的强引用以后,map里面的value却没有被回收.而这块value永远不会被访问到了. 所以存在着内存泄露. 最好 ...