今天在自学敲代码的时候发现了一个问题，当时的例子如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<style>

    #div1{

        height: 200px;

        width: 200px;

        background-color: #3b7796;

    }

    #btn{

        margin: 50px;

    }

</style>

<script>

    function fn1(){

        alert("this is div");

    }

    function fn2(){

        alert("this is btn");

    }

</script>

<body>

    <div id="div1" onclick="fn1();">

        <button id="btn" onclick="fn2();">btn</button>

    </div>

</body>

</html>

在我点击 btn 之后，会触发div上的点击事件，就会看到2个提醒框。

这个原因就是因为事件冒泡造成的，修改代码

    function fn2(e){

        //这里做浏览器兼容，如果提供了event 就说明他不是IE

        if(e &&  e.stopPropagation){

            e.stopPropagation();

        }else {

            //IE方式处理事件冒泡

            window.event.cancelBubble = true;

        }

        alert("this is btn");

    }

这样就阻止了事件冒泡。

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

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

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

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

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

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

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

  4. javascript 阻止事件冒泡 cancelBubble

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

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

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

  6. javascript 阻止事件冒泡和阻止默认事件对比

    公司项目有像上图中效果的功能需求这也是很常见功能很简单功能,通过一个小例子和大家聊聊js的事件冒泡和默认事件. 先说说一般的实现方式即使用阻止事件冒泡的方式去做,给input绑定一个click事件(并 ...

  7. javascript 阻止事件冒泡

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

  8. javascript阻止事件冒泡的方法

    有的时候我们需要实现这样的功能: 点击某个蒙版,该蒙版消失,但是如果点击蒙版上的某个元素,希望蒙版不消失,这就需要用到阻止事件的冒泡了 html: <div id="outer&quo ...

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

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

随机推荐

  1. Android 官方文档：（二）应用清单 —— 2.26 &lt;uses-permission&gt;标签

    syntax: <uses-permission android:name="string"         android:maxSdkVersion="inte ...

  2. Ansible@一个有效的配置管理工具--Ansible configure management--翻译（十二）

    如果没有书面授权,请勿转载 第五章 自己定义模块 External inventories In the first chapter we saw how Ansible needs an inven ...

  3. Android应用程序与SurfaceFlinger服务之间的共享UI元数据（SharedClient）的创建过程分析

    文章转载至CSDN社区罗升阳的安卓之旅,原文地址:http://blog.csdn.net/luoshengyang/article/details/7867340 在前面一篇文章中,我们分析了And ...

  4. 一个非常给力的播放器video-js

    video-js采用的是html5播放器. 在不支持html5的浏览器会自动切换成flash. video-js的官网http://www.videojs.com/ 看看下载的demo就知道个大概了. ...

  5. oracle Recyclebin

    每个用户都有自己的Recycle Bin.删除的对象不会永久存储在Recycle Bin中,Oracle会按照一定的规则自动清除里面的内容,如没有足够的空间.执行show recyclebin时只列出 ...

  6. 关于mysql binlog日志的格式说明

    Binary Log 记录方式 Row Level Binary Log会记录成每一行数据被修改的形式,然后在Slave端再对相同的数据进行修改. 如果修改了表的结构,那么binlog日志记录的是重新 ...

  7. su普通用户切换root用户失败

    http://blog.itpub.net/26432034/viewspace-1688391/ http://blog.csdn.net/zhangdaiscott/article/details ...

  8. MongoDB的save 和insert函数的区别

    mongodb的save和insert函数都可以向collection里插入数据,但两者是有两个区别: 一.使用save函数里,如果原来的对象不存在,那他们都可以向collection里插入数据,如果 ...

  9. SlimDX的DirectSound模块

    网上SlimDX的资源很少,搜到了http://www.xukailun.me/article/238/这篇关于<SlimDX的DirectSound模块应用实战>的文章,备份下来以备不时 ...

  10. 新测 thinkphp3.2 整合 PHPMailer 发送邮件

    PHPMailer 的官方网站:http://phpmailer.worxware.com/ PHPMailer 最新类库下载地址:[点击下载] PHPMailer GitHub 下载地址:https ...