JS中点击事件冒泡解析
来源:互联网 发布:hadoop 处理数据 编辑:程序博客网 时间:2024/05/18 03:34
什么是点击事件冒泡?
例:
今天我去小明家找他玩。正好小明、小明的爸爸、小明的爷爷在客厅一起看电视。
我对小明说:”咱们出去玩吧“。
小明十分乐意的回答到:”好啊“。
小明的爸爸听到后,说到:”把作业写完后在出去玩“。
小明的爷爷也发话了:”预报有雷阵雨,就别出去玩了“。
我本来只是询问一下小明的意见,结果他爸比和爷爷对我说的话做出的反应影响到了小明接下来的行为。
这次之后,我和小明私下约定好。以后去找他玩的,都会去他房间里讲话,避免他家人听到。
这就叫事件阻止行为,只有天知地知你知我知,避免其他人造成不必要的影响。
废话说了那么多,不知道大家明白了没有。直接上代码:
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>点击事件冒泡处理</title> <script type="text/javascript"> var fun1 = function (e) { alert("我是父点击事件"); } var fun2 = function (e) { e.stopPropagation();//阻止点击事件向上冒泡 alert("我是子点击事件"); } </script></head><body> <div onclick="fun1(event)" style="height:100px;background-color:black;color:white;text-align:center;border:1px solid red"> 父节点 <div onclick="fun2(event)" style="margin-top:20px;border:1px solid red;height:30px"> 子节点 </div> </div></body></html>
子节点的点击事件会上父一级传递的,就像上述代码中说表明的,在点击事件触发fun2的时候,接下来也会触发fun1。在大部分的逻辑中,我们不是很希望这样。在就需要在点击子节点的时候,中止父节点接下来的行为。
再补充一点比较特殊的点击事件:
如果要取消某些DOM元素单击后的缺省处理函数,比如转到其它页面或是提交表单,为了取消这些缺省实际处理,可以调用e.preventDefault()。
备注:这里只是对一般情况的点击事件冒泡做了说明。
注意当触发事件的按钮或者标签有层级关系的时候才会出现冒泡这种情况
阅读全文
0 0
- JS中点击事件冒泡解析
- js点击事件冒泡
- JS中事件冒泡
- js中阻止冒泡事件
- js中阻止事件冒泡
- JS中 事件冒泡与事件捕获
- js中事件捕获和事件冒泡
- JS中 事件冒泡与事件捕获
- JS,Jquery中事件冒泡以及阻止事件冒泡方法
- js控制点击事件冒泡,兼容ie火狐苹果
- 解决js中鼠标事件冒泡问题
- JS中阻止事件冒泡实例
- table,td点击事件冒泡。禁止ie,firefox中事件冒泡。
- js中阻止默认事件,阻止冒泡事件
- js事件冒泡,元素中还有其他事件
- 冒泡事件解析
- jquery阻止事件冒泡 点击
- JS中的事件冒泡
- Unity鼠标控制物体360°旋转和点击移动
- SpringMVC 拦截器遇到浏览器请求/favicon.ico被拦截导致触发session失效问题的处理办法
- ListView 通用适配器
- 软银中国负责人 潘政荣:80%的创业者没有想清楚要做什么
- [ 随机增量法 ] BZOJ1336 && 1337 && 2823
- JS中点击事件冒泡解析
- 程序员,你还要迷茫多久?
- 年底福利来了,一次性送10本书,就是这么暴力!
- Python去除list中重复的元素
- 基于深度卷积特征的增量式图像识别
- 20171218Capstone培训班
- day 41 PHP安装
- Python学习笔记之文件操作
- 如今目标检测领域已被深度学习占领,yolo 等算法性能表现都不错,那还有什么坑可以挖的么?| 社区问答