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

<!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得知Scroller(两)——ViewGroup转让scrollTo()

    MainActivity例如下列: package cc.ac; import android.os.Bundle; import android.view.View; import android. ...

  2. MPreview.js

    Word,PPT 文档预览组件(图片预览组件) 移动端请移步 MPreview.mobile Demo参考 http://demo.webjyh.com/MPreview/ 特此说明 此插件是我在项目 ...

  3. QT笔记（1）--QT编程环境搭建

    一.QT简介 Qt  是一个1991年由奇趣科技开发的跨平台C++图形用户界面应用程序开发框架.它既可以开发GUI程序,也可用于开发非GUI程序,比如控制台工具和服务器.Qt是面向对象的框架,使用特殊 ...

  4. win7系统64位安装oracle10g

    win7系统64位安装oracle10g 下载地址: http://download.oracle.com/otn/nt/oracle10g/10204/10204_vista_w2k8_x64_pr ...

  5. Foundation--NSString+NSMutableString

    NSString 字符串创建: 1.NSString *strr = @"0123456789"; 2.NSString *str = [NSString stringWithSt ...

  6. Asp.net MVC razor语法参考

    Razor语法的快捷参考http://haacked.com/archive/2011/01/06/razor-syntax-quick-reference.aspx/ 只是copy下来便于查阅! I ...

  7. js Array 学习

    摘抄自<JavaScript权威指南> 1.join()返回生成的字符串.数组元素转化为字符串,拼接.默认分隔符:“,”. 2.reverse()返回逆序的数组,替换.数组中的元素倒序. ...

  8. 轻松搞定Ajax（分享下自己封装ajax函数，其实Ajax使用很简单，难是难在你得到数据后来怎样去使用这些数据）

    hey,guys!今天我们一起讨论下ajax吧!此文只适合有一定ajax基础,但还是模糊状态的同志,当然高手也可以略过~~~ 一.概念 Ajax(Asynchronous Javascript + X ...

  9. how to create virtual network in OS X 10.9

    ifconfig lo0 alias 172.16.123.1 will add an alias IP 172.16.123.1 to the loopback adapter sudo ifcon ...

  10. opencv菜鸟学习之旅cvNorm

    Norm 计算数组的绝对范数, 绝对差分范数或者相对差分范数 double cvNorm( const CvArr* arr1, const CvArr* arr2=NULL, int norm_ty ...