JS中点击事件冒泡解析
2016-06-26 09:42
274 查看
关于Javascript中的点击事件冒泡的问题,很多初学者都处理不好。
什么是点击事件冒泡?
例:
今天我去小明家找他玩。正好小明、小明的爸爸、小明的爷爷在客厅一起看电视。
我对小明说:”咱们出去玩吧“。
小明十分乐意的回答到:”好啊“。
小明的爸爸听到后,说到:”把作业写完后在出去玩“。
小明的爷爷也发话了:”预报有雷阵雨,就别出去玩了“。
我本来只是询问一下小明的意见,结果他爸比和爷爷对我说的话做出的反应影响到了小明接下来的行为。
这次之后,我和小明私下约定好。以后去找他玩的,都会去他房间里讲话,避免他家人听到。
这就叫事件阻止行为,只有天知地知你知我知,避免其他人造成不必要的影响。
废话说了那么多,不知道大家明白了没有。直接上代码:
子节点的点击事件会上父一级传递的,就像上述代码中说表明的,在点击事件触发fun2的时候,接下来也会触发fun1。在大部分的逻辑中,我们不是很希望这样。在就需要在点击子节点的时候,中止父节点接下来的行为。
再补充一点比较特殊的点击事件:
如果要取消某些DOM元素单击后的缺省处理函数,比如转到其它页面或是提交表单,为了取消这些缺省实际处理,可以调用e.preventDefault()。
备注:这里只是对一般情况的点击事件冒泡做了说明。
什么是点击事件冒泡?
例:
今天我去小明家找他玩。正好小明、小明的爸爸、小明的爷爷在客厅一起看电视。
我对小明说:”咱们出去玩吧“。
小明十分乐意的回答到:”好啊“。
小明的爸爸听到后,说到:”把作业写完后在出去玩“。
小明的爷爷也发话了:”预报有雷阵雨,就别出去玩了“。
我本来只是询问一下小明的意见,结果他爸比和爷爷对我说的话做出的反应影响到了小明接下来的行为。
这次之后,我和小明私下约定好。以后去找他玩的,都会去他房间里讲话,避免他家人听到。
这就叫事件阻止行为,只有天知地知你知我知,避免其他人造成不必要的影响。
废话说了那么多,不知道大家明白了没有。直接上代码:
<!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()。
备注:这里只是对一般情况的点击事件冒泡做了说明。
相关文章推荐
- JS中的进制转换以及作用
- JavaScript类型系统之布尔Boolean类型详解
- 基于JavaScript实现单选框下拉菜单添加文件效果
- JavaScript直播评论发弹幕切图功能点集合效果代码
- JavaScript 函数调用时带括号和不带括号的区别
- JavaScript 函数调用时带括号和不带括号的区别
- javascript运算符——逻辑运算符
- 使用Chartjs
- js判断一个对象为数组的方法
- javaScript学习基础篇(2)(弹框,日期)
- JavaScript Window浏览器对象模型方法与属性汇总
- js获取浏览器窗口属性
- 将json形式的时间字符串转换成正常的形式
- JavaScript直播评论发弹幕切图功能点集合效果代码
- 基于JavaScript实现单选框下拉菜单添加文件效果
- JavaScript类型系统之布尔Boolean类型详解
- JavaScript中Form表单技术汇总(推荐)
- 用JS实现图片轮播效果代码(一)
- 用JS实现轮播图效果(二)
- JavaScript 中的命名空间