js中防止事件传播的方法
<!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中防止事件传播的方法的更多相关文章
- JS中的事件传播流程
JS中的事件传播流程 1,Javascript与HTML之间的交互是通过事件实现的. 事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间. 可以使用侦听器来预定事件,以便事件发生时执行相应代码. 2 ...
- js中获取事件对象的方法小结
原文地址:http://jingyan.baidu.com/article/d8072ac4594d6cec95cefdac.html 事件对象 的获取很简单,很久前我们就知道IE中事件对象是作为全局 ...
- 怎么理解js中的事件委托
怎么理解js中的事件委托 时间 2015-01-15 00:59:59 SegmentFault 原文 http://segmentfault.com/blog/sunchengli/119000 ...
- 看懂此文，不再困惑于 JS 中的事件设计
看懂此文,不再困惑于 JS 中的事件设计 今天刚在关注的微信公众号看到的文章,关于JS事件的,写的很详细也很容易理解,相关的知识点都有总结到,看完就有种很舒畅的感觉,该串起来的知识点都串起来了.反正一 ...
- JS 中的事件设计
看懂此文,不再困惑于 JS 中的事件设计 原文出处: aitangyong 抽空学习了下javascript和jquery的事件设计,收获颇大,总结此贴,和大家分享. (一)事件绑定的几种方式 ...
- js中的事件委托（事件代理）详解
本文转载:https://www.cnblogs.com/liugang-vip/p/5616484.html#!comments js中的事件冒泡.事件委托是js 中一些需要注意的小知识点,这里结合 ...
- 和我一起理解js中的事件对象
我们知道在JS中常用的事件有: 页面事件:load: 焦点事件:focus,blur: 鼠标事件:click,mouseout,mouseover,mousemove等: 键盘事件:keydown,k ...
- JS中的事件冒泡（Bubble）和事件捕获（capture）以及如何阻止事件的冒泡
对“捕获”和“冒泡”这两个概念,通常我们对冒泡了解和使用的会更多一些,因为在我们使用的所有浏览器中,都支持事件冒泡 ,即事件由子元素向祖先元素传播的,就 像气泡从水底向水面上浮一样.而在像firefo ...
- js中冒泡事件和捕获事件
js中冒泡事件和捕获事件: 冒泡事件:冒泡事件是从里向外,即是从被绑定元素开始一直向外到达页面的所有祖先元素都会被触发,这 一过程被称为事件冒泡.这个事件从原始元素开始一直冒泡到DOM树的最上层 捕获 ...
随机推荐
- SQL Server 根据关键字和结束符提取字符串子串
/* @info-待截取的字符串 @indexStr-截取子串的起始字符串 @split-截取子串的结束符号 列入依次传入 胸片:正常.心电图:异常,需要注意.血常规检查:正常. 心电图 '.' 返回 ...
- 分别实现数组所有元素相加、相乘、相与——FP 风格
var ops = { "plus": (x,y)=>x+y, "mul" : (x,y)=>x*y, "and" : (x,y ...
- Quicksort------代码之美
#include<iostream> #include<cstdlib> #include<time.h> using namespace std; void sw ...
- (转)使用vs调试的时候，如何知道程序阻塞在哪里？
遇到一个问题,加了两个断点当运行到断点A后,我释放掉了,理想状态应该是在断点B停住,但并没有,程序感觉就像是阻塞了一样请问,这种状况如何知道程序当前是在哪里阻塞着? 回复: 可以让调试器停住,然后在调 ...
- MVC进阶篇（四）——[HttpGet]和[HttpPost]
前言 Get和post,一个获取请求,一个提交请求,在MVC里面用法也很特别,总结一下,我理解的不是特别深刻,希望多多交流. 内容 [HttpGet] 需求: 用户想要通过点击修改按钮来达到修改这部分 ...
- 【spring】 SpringMVC返回json数据的三种方式
配置方法一 **1.导入第三方的jackson包,jackson-mapper-asl-1.9.7.jar和jackson-core-asl-1.9.7.jar. 2.spring配置文件添加** & ...
- SDUT OJ 图结构练习——最短路径 ( Floyed 算法 AND Dijkstra算法)
图结构练习——最短路径 Time Limit: 1000 ms Memory Limit: 65536 KiB Submit Statistic Discuss Problem ...
- SDUT OJ 数据结构实验之排序二：交换排序
数据结构实验之排序二:交换排序 Time Limit: 1000 ms Memory Limit: 65536 KiB Submit Statistic Discuss Problem Descrip ...
- Zookeeper客户端对比选择_4
Zookeeper客户端对比选择 本文思维导图 使用框架的好处是自带一套实用的API,但是Zookeeper虽然非常强大,但是社区却安静的可怕,版本更新较慢,下面会先从zookeeper原生API的不 ...
- ubuntu下的pycharm4中文路径乱码
修改字体: 设置(settings)->外观与行为(appearance & behavior) -> 外观(appearance) ->我选择的主题是Darcula 但其字 ...