冒泡情况
2015-05-30 16:06
246 查看
冒泡事件:是当一个div设置一个点击事件,这个点击事件会传递给它的父级,然后依次传递下去,也就是说,当div嵌套一个div,两个div上都有点击事件,当里边的div点击事件触发,两个点击事件都会触发,这种情况会带来问题。可以用cancelBubble=true;解决
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>冒泡</title> <style> #div1{width:300px; height:300px; background:#999; display:none;} </style> <script> window.onload=function() { var oBtn=document.getElementById('btn1'); var oDiv=document.getElementById('div1'); oBtn.onclick=function(ev) { var oEvent=ev||event;//解决兼容问题 oDiv.style.display='block';//当点击按钮是oDiv显示 oDiv.onclick=function(ev) { oEvent=ev||event; oEvent.cancelBubble=true;//当oDiv显示后,关闭oDiv的冒泡,点击oDiv,不会隐藏 } oEvent.cancelBubble=true;//关闭按钮中的冒泡 } document.onclick=function()//当按其他空白区域,oDiv消失 { oDiv.style.display='none'; } } </script> </head> <body> <input id="btn1" type="button" value="显示"/> <div id="div1"></div> </body> </html>
相关文章推荐
- Stanley-系列一
- 分数不等式
- 3-4
- iOS开发笔记2-使用Alcatraz管理Xcode的插件
- Majority Element
- centos编译安装svn
- centos 零碎学习小记 11.
- 异常集
- Java基础之集合框架详解(一)
- POI--HSSFWorkbook类
- 计算 volume of 3D .vtk points (triangle mesh, closed polydata)
- Delphi常用快捷键
- POI--HSSFWorkbook类
- 通过Typesafe Activator创建akka java sample
- 线程通信机制:共享内存 VS 消息传递
- Eclipse去除js(JavaScript)验证错误
- 全国首发 | 腾讯Bugly携手极客学院,「Android Crash 跟踪方法」强势上线!
- 错误 'Cannot run program "/home/uv/IDE/adt/sdk/platform-tools/adb": error=2, No such file or directory
- Python学习之解析xml文件
- ubuntu 安装mysql及目录位置