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

<!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. HDU 4521 间隔》=1的LIS 线段树+dp

    九野的博客,转载请注明出处:http://blog.csdn.net/acmmmm/article/details/11991119 题意: n个数 d个距离 下面n个数的序列,求序列中的最长单调递增 ...

  2. UVa 836 - Largest Submatrix

    题目:给你一个n*n的01矩阵,求里面最大的1组成的矩形的米娜及. 分析:dp.单调队列.UVa 1330同题,仅仅是输入格式变了. 我们将问题分解成最大矩形.即求解以k行为底边的图形中的最大矩形.然 ...

  3. SSH框架-unexpected token: * near line 1, column 8 [select * from tb_chaper where course_id = 2];报错解决方法

    SSH项目,访问jsp页面出现报错,控制台显示报错信息: org.springframework.orm.hibernate3.HibernateQueryException: unexpected ...

  4. 【组合数学：第一类斯特林数】【HDU3625】Examining the Rooms

    Examining the Rooms Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Othe ...

  5. 【二分答案】 【POJ3497】 【Northwestern Europe 2007】 Assemble 组装电脑

    Assemble Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 3171   Accepted: 1013 Descript ...

  6. .net 链接oracle

    虽然EF6都快要出来了,但是对于Oracle数据库,仍然只能用DB first和Model First来编程,不能用Code First真是一个很大的遗憾啊. 好了,废话少说,我们来看看EF中是如何用 ...

  7. Javascript基础学习笔记

    什么是变量?变量是用于存储信息的容器变量的声明语法: var 变量名 变量名 = 值;变量要先声明再赋值变量可以重复赋值变量的命名规则变量必须以字母开头:变量也能以$和_符号开头(不过我们不推荐这么做 ...

  8. 下拉菜单中的Option对象

    1.创建Option对象 1.1 var optionEle1 = document.createElement('option'); 1.2 var optionEle2 = new Option( ...

  9. jq操作cookie

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  10. TCP的拥塞控制（转载）

    1.引言 计算机网络中的带宽.交换结点中的缓存和处理机等,都是网络的资源.在某段时间,若对网络中某一资源的需求超过了该资源所能提供的可用部分,网络的性能就会变坏.这种情况就叫做拥塞. 拥塞控制就是防止 ...