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

<!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. Swift继承的用法

    一个类可以继承另一个类的方法,属性和其它特性.当一个类继承其它类,继承类叫子类,被继承类叫超类(或父类).在Swift中,继承是区分「类」与其它类型的一个基本特征. 在Swift中,类可以调用和访问超 ...

  2. React-Native 获取node.js提供的接口

    一个简单的React-Native 获取node.js提供的接口的实现 一.node.js var http = require("http"); var url = requir ...

  3. HDU 4798 - Skycity

    告诉你一幢楼的高度,楼的层数,每层一样高. 每一层的底边是一个圆,下一层的玻璃一定要包括进上一层的底边. 每层玻璃铺成棱柱形,玻璃有最小面积限制. 问你这层楼最小的总玻璃数是多少. 求出每层最小的玻璃 ...

  4. Struct和Class的区别

    转载至:http://blog.csdn.net/yuliu0552/article/details/6717915 C++中的struct对C中的struct进行了扩充,它已经不再只是一个包含不同数 ...

  5. 小项目--反eclass

    前言—— 最近会把前一段时间闲的无聊写的一些很小的项目写一些博客,用来练练手. 引子—— 最近班里有个很讨厌的软件,,,,教育局规定每个学校要上传多媒体使用记录,所以学校就给班里每台电脑上装了一个比较 ...

  6. Java开发23中设计模式

    设计模式(Design Patterns) 设计模式是一套被反复使用,多数人知晓的,经过分类编目的,代码设计经验的总结.使用设计模式是为了可重用代码,让代码更容易被他人理解,保证代码的可靠性.毫无疑问 ...

  7. spring:ContextLoaderListener接口

    在启动Web容器时,自动装配Spring applicationContext.xml的配置信息. 因为它实现了ServletContextListener这个接口,在web.xml配置这个监听器,启 ...

  8. android 代码布局 记录

    1.概述 android 中大部分ui 布局是用xml 进行的,但是用代码布局调整是不可避免的.自己比较喜欢写模版,有些时候子类再继承模版时,往往有一些ui上的调整,又懒得去重写一个xml,就偷懒用代 ...

  9. android客户端从服务器端获取json数据并解析的实现代码（重要）

    首先客户端从服务器端获取json数据 1.利用HttpUrlConnection /** * 从指定的URL中获取数组 * @param urlPath * @return * @throws Exc ...

  10. Linux进程间通信——使用流套接字

    前面说到的进程间的通信,所通信的进程都是在同一台计算机上的,而使用socket进行通信的进程可以是同一台计算机的进程,也是可以是通过网络连接起来的不同计算机上的进程.通常我们使用socket进行网络编 ...