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

<!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应用程序组件Content Provider的启动过程源代码分析

    文章转载至CSDN社区罗升阳的安卓之旅,原文地址:http://blog.csdn.net/luoshengyang/article/details/6963418 通过前面的学习,我们知道在Andr ...

  2. 从Android Handler内部类到WeakReference的知识关联

    Handler: 普通使用方法: Handler用于处理和从队列MessageQueue中得到Message.一般我们要重写Handler的handleMessage(Message msg){}方法 ...

  3. SQL判断是否存在符合某条件的记录

    IF EXISTS ( --判断是否存在合符条件的记录 ) FROM [DCL].[SecurityUser] WHERE [UserAccount] = @UserAccount ) BEGIN - ...

  4. Qt WebEngine 网页交互

    环境:Qt5.7.0,VS2013 一.简单介绍 从 Qt5.4 开始已经去掉 Qt WebKit 模块了,使用的是 chrome 内核封装的 QtWebEngine,浏览器相关的类有以下几个: QW ...

  5. 基于excel9.h的excel处理

    基于excel9.h的excel处理; #include "excel9.h" #include <iostream> using namespace std; cla ...

  6. avalon前端js直接通过ajax请求传一个对象到后台

    代码如下:                //企业开票信息      vm.invoiceInfo = {       companyId : "",            //企 ...

  7. 2015.4.10-C#入门基础(三)

    今天,我们聊一聊一些基本问题: 1.修饰符有哪些?有什么区别呢? 首先大家想到的应该是 public:特点是所属类的成员和非所属类的成员都可以访问 private:只有所属类的成员才可以访问 prot ...

  8. tomcat配置CATALINA_HOME变量

    1.CATALINA_HOME是TOMCAT安装路径的别名,目的是为了方便使用TOMCAT 2.计算机>属性>环境变量, 新建环境变量.变量名为CATALINA_HOME ,变量值tomc ...

  9. Android Studio rename module Can't rename root module

    Android Studio修改工程根目录的时候会报错, rename module Can't rename root module. 主要是该工程已经打开,再命名必须要关闭改工程,就跟正在写一个t ...

  10. Print! Print! Print!

    print语句可以实现打印--只是对程序员友好的标准输出流的接口而已. 从技术角度来讲,这是把一个或多个对象转换为其文本表达形式,然后发送给标准输出或另一个类似文件的流. 更详细地说,在Python中 ...