<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #div1{
            background-color: #2b99ff;
            height: 400px;
            width: 500px;
        }
        #div2{
            background-color: #e59373;
            height: 170px;
            width: 180px;
        }
    </style>
</head>
<body>
    <div id="div1" onclick="func1()">
        <div id="div2" onclick="func2(event)"></div>
    </div>
<script>
    function func1() {
        alert("div1");
    }
    function func2(e) {
        alert("div2");
        e.stopPropagation();            // 此图形因为div2标签是嵌套在DIV1里的 如果点击div2区域触发事件,也同事会触发div1的区域事件,
　　　　　　　　　　　　　　　　　　　　　　　　　// 用stopPropagation 来阻止事件的传播 此时点击div2 只有div2弹出
    }
</script>
</body>
</html>

js中防止事件传播的方法的更多相关文章

  1. JS中的事件传播流程

    JS中的事件传播流程 1,Javascript与HTML之间的交互是通过事件实现的. 事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间. 可以使用侦听器来预定事件,以便事件发生时执行相应代码. 2 ...

  2. js中获取事件对象的方法小结

    原文地址:http://jingyan.baidu.com/article/d8072ac4594d6cec95cefdac.html 事件对象 的获取很简单,很久前我们就知道IE中事件对象是作为全局 ...

  3. 怎么理解js中的事件委托

    怎么理解js中的事件委托 时间 2015-01-15 00:59:59  SegmentFault 原文  http://segmentfault.com/blog/sunchengli/119000 ...

  4. 看懂此文，不再困惑于 JS 中的事件设计

    看懂此文,不再困惑于 JS 中的事件设计 今天刚在关注的微信公众号看到的文章,关于JS事件的,写的很详细也很容易理解,相关的知识点都有总结到,看完就有种很舒畅的感觉,该串起来的知识点都串起来了.反正一 ...

  5. JS 中的事件设计

    看懂此文,不再困惑于 JS 中的事件设计 原文出处: aitangyong    抽空学习了下javascript和jquery的事件设计,收获颇大,总结此贴,和大家分享. (一)事件绑定的几种方式 ...

  6. js中的事件委托（事件代理）详解

    本文转载:https://www.cnblogs.com/liugang-vip/p/5616484.html#!comments js中的事件冒泡.事件委托是js 中一些需要注意的小知识点,这里结合 ...

  7. 和我一起理解js中的事件对象

    我们知道在JS中常用的事件有: 页面事件:load: 焦点事件:focus,blur: 鼠标事件:click,mouseout,mouseover,mousemove等: 键盘事件:keydown,k ...

  8. JS中的事件冒泡（Bubble）和事件捕获（capture）以及如何阻止事件的冒泡

    对“捕获”和“冒泡”这两个概念,通常我们对冒泡了解和使用的会更多一些,因为在我们使用的所有浏览器中,都支持事件冒泡 ,即事件由子元素向祖先元素传播的,就 像气泡从水底向水面上浮一样.而在像firefo ...

  9. js中冒泡事件和捕获事件

    js中冒泡事件和捕获事件: 冒泡事件:冒泡事件是从里向外,即是从被绑定元素开始一直向外到达页面的所有祖先元素都会被触发,这 一过程被称为事件冒泡.这个事件从原始元素开始一直冒泡到DOM树的最上层 捕获 ...

随机推荐

  1. C#中实现UrlEncode和UrlDecode

    有时需要进行url编码.解码,比如从html中捞数据,有可能>.&等字符会被编码成>等. WinForm中默认没有引入System.Web,因此要现在项目中引入依赖 System. ...

  2. 以太坊系列之十六：golang进行智能合约开发

    以太坊系列之十六: 使用golang与智能合约进行交互 以太坊系列之十六: 使用golang与智能合约进行交互 此例子的目录结构 token contract 智能合约的golang wrapper ...

  3. 团队内的沟通方式：网络 OR 当面

    4月1日,我和老王稍微聊了聊关于互联网的工作方式,团队的成员不在一个地方,通过远程互联网的方式进行沟通是不是OK.现在确实有很多公司是有多地的分公司,子公司,不同的团队在不同的办公室中,甚至一个大团队 ...

  4. ST表略解

    题面 给定一个长度为\(N\)的数列,和\(M\)次询问,求出每一次询问的区间内数字的最大值. 对于30%的数据,满足: \(1≤N,M≤10\) 对于70%的数据,满足: \(1≤N,M≤10^5\ ...

  5. 宏（使用注意事项、主要用途）------c++程序设计原理与实践（进阶篇）

    使用宏的时候一定要小心:在c中没有真正有效的方法来避免使用宏,但宏带有严重的副作用,因为宏不遵守通常的c(或c++)作用域和类型规则——它只是一种文本替换.   宏的使用注意事项: 所以宏名全部大写. ...

  6. 定时器timer类

    timer类 Timer(定时器)是Thread的派生类,用于在指定时间后调用一个方法. 构造方法: Timer(interval, function, args=[], kwargs={})  in ...

  7. 为什么要使用MQ消息中间件？

    在面试大型互联网公司的时候,很可能会被问到消息队列的问题: 1.在何种场景下使用了消息中间件? 2.为什么要在系统里引入消息中间件? 3.如何实现幂等? 链式调用是我们在写程序时候的一般流程,为了完成 ...

  8. 为什么有些网站PING不通但又能访问.

    一PING它,出现request timed out,发关4个送数据包,返回0个.丢失率100%,明明不通但为什么又能够访问? 应该是该网站禁用了ICMP回应或者开启了ICMP过滤.如果设置了ICMP ...

  9. redis锁

    1.引入依赖: <!--使用redis客户端需要用到的包 --> <dependency> <groupId>redis.clients</groupId&g ...

  10. 012 Android Palette颜色选择器的使用

    1.页面总体使用线性布局(LinearLayout) 2.将Toolbar(顶部菜单栏)拖入design模式下的设计界面中 3.颜色选择器需要在build.gradle中手动的添加 compile ' ...