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

<!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. 生成ssl证书文件

    网上关于生成SSL证书文件的方法有很多,但我查了几个,发现有或多或少的错误,如下我图文并茂的展示,亲测无任何问题,分享给大家,谢谢. 1.创建根证书密钥文件(自己做CA)root.key openss ...

  2. IT技术论坛

    http://www.v2ex.com/ http://www.dewen.org/ http://stackoverflow.com/ http://segmentfault.com/ 博客园

  3. XML Dtd Schema

    在XML技术里,可以编写一个文档来约束一个XML文档的书写规范,这称之为XML约束. 整体比较: XML Schema符合XML语法结构. DOM.SAX等XML API很容易解析出XML Schem ...

  4. [转]MFC 加载其他的应用程序

    三个SDK函数 winexec, shellexecute,createprocess可以使用.WinExec 最简单,两个参数,前一个指定路径,后一个指定显示方式.后一个参数值得说一下,比如泥用 S ...

  5. Android进程

    android进程等级 1.前台进程 2.可视进程 3.服务进程 4.后台进程 5.空进程 让应用退出方式 finish();让应用成为空进程 Process.killProcess();杀进程 sy ...

  6. Python学习笔记(五)Python的切片和迭代

    切片 Python提供了切片操作符,可以对list.tuple.字符串进行截取操作. list中的切片应用 语法如下: >>> L = ['Michael', 'Sarah', 'T ...

  7. Async 与 Await 关键字研究

    1        Aynsc 和 Await 关键字的研究 在 .NET 4.0 以后,基于 Task 的异步编程模式大行其道,因其大大简化了异步编程所带来的大量代码工作而深受编程人员的欢迎,如果你曾 ...

  8. IDEA12 KeyGen Download List

    When you use IDEA to develop Java, you can use the following file to generate lincese. Because CNBlo ...

  9. Delphi控件大全：www.vclcomponents.com

    torry的排版不行了,还好找到它.

  10. Office OpenXML-Excel(一)

    原文 http://www.cnblogs.com/changminglong/articles/2840004.html 适用于 2007 Microsoft Office 套件,Microsoft ...