标签：window 触发事件 img back play 冒泡 height var image
模态框
1、因为a链接和和顶级document都注册了单击事件，所以要组织a链接冒泡，不然又会从document的单击事件走一遍
2、在document的单击事件中，只需要判断触发事件的目标元素是不是白色盒子部分就行了
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { padding: 0; margin: 0; } body, html { height: 100%; } .mask { width: 100%; height: 100%; position: fixed; top: 0; left: 0; background: rgba(0, 0, 0, 0.6); display: none; } .login { width: 200px; height: 200px; background: white; margin: 200px auto; border: 3px solid #FFA25E; } </style> </head> <body> <a href="#">注册</a> <a href="#">登陆</a> <div class="mask"> <div class="login" id="login"></div> </div> <script> //需求：点击登陆a链接，显示模态框，之后点击除了中间白色登陆框部分，都可以将模态框部分隐藏 var a = document.getElementsByTagName("a")[1]; var mask = document.getElementsByTagName("div")[0]; a.onclick = function (ev) { ev = ev || window.event; mask.style.display = "block"; if (ev || ev.stopPropagation) { ev.stopPropagation(); } else { ev.cancelBubble = true; } } document.onclick = function (ev) { ev = ev || window.event; var targetId = ev.target ? ev.target.id : ev.srcElement.id; if (targetId !== "login") { mask.style.display = "none"; } } </script> </body> </html>
事件委托
1、普通注册事件没有办法为新创建的元素绑定事件。所以我们要使用冒泡的特性，事件委托。
2、
标签：window 触发事件 img back play 冒泡 height var image
原文地址：http://www.cnblogs.com/wuqiuxue/p/7988074.html
