web前端|js教程
传播,事件,阻止
web前端-js教程做一个小demo，点击按钮出现浮层，点击其它地方关闭浮层，写一个简单css
php会员报单源码,arm ubuntu更新源,tomcat一闪就没反应,天津个人转让爬虫,php判断字符串编码格式,seo论坛介绍lzw
.wrapper{ position:relative; display:inline-block;}.popover{ position:absolute; border:1px solid red; left:100%; top:0; padding:10px; margin-left:10px; background:white; display: none; /*默认隐藏*/}.popover::before{ position:absolute; content:\; top:5px; right:100%; border:10px solid transparent; border-right-color:red;}.popover::after{ position:absolute; content:\; top:5px; right:100%; border:10px solid transparent; border-right-color:white; margin-right:-1px;}
浮层
整形网站源码,装ubuntu版本好用,茄子是爬虫咯,php aopllo,seo成功研究lzw
app 开发 源码,vscode全透明背景图,ubuntu 自动卸载,tomcat下部署war,手机爬虫库,ruby vs php,seo优化收费怎么样分类,免费物流公司网站模板lzw
clickMe.addEventListener(click,function(){ popover.style.display = lock; });
那现在我要点击页面空白地方关闭呢？该用什么方法，很容易想到监听文档，如下代码
document.addEventListener(click,function(){ popover.stely.display = one;});
但是实际上这样写了之后，按钮都失效了，怎么点都没有反应。这是为什么呢？
理解上一篇讲的捕获和冒泡事件后就很好理解这点了，可以[]()。
我们没有指定监听是在捕获还是冒泡阶段，浏览器默认是冒泡阶段，当我们点击按钮时，捕获阶段没有发生什么时候，但是冒泡阶段就不一样了，首先button上函数先触发，然后document上函数也触发了，导致准备出现的浮层又被隐藏了。
那你可能要问，button上的事件执行了没？其实这两个事件都执行了，只是时间太短，浏览器默认一起执行了，可以在里面加一个debugger，就可以看到了。
clickMe.addEventListener(click,function(){ popover.style.display = lock;});
那该怎么解决呢？最简单的方法是，除了要执行popover.style.display = lock，还要阻止事件传播
clickMe.addEventlistener(click,function(){ popover.style.display = lock;});popover.addEventListener(click,function(e){ e.stopPropagation();});
这里为什么添加在按钮的父元素上面呢？如果不添加在父元素上面，点击浮层的时候，浮层也会被关闭。
如果页面上有很多监听器的话，这个方法是比较浪费内存的，比较省内存的方法用JQuery 做
$(clickMe).on(click,function(){ $(popover).show(); $(document).one(click,function(){ $(popover).hide(); });});$(wrapper).on(click,function(e){ e.stopPropagation(); })
一开始不监听，只在popover`show`的时候监听一次，马上关掉，这叫做清理战场。
$(wrapper).on(click,false)和下面的代码完全等价
$(wrapper).on(click,function(e){ e.preventDefault();//阻止默认事件 e.stopPropagation(); //阻止传播})
但是如果页面中有checkbox，你在它的父元素任何一层，包括checkbox自己，添加了组织默认事件那么这个checkbox就没办法被check。
这里有个问题，如果没有阻止事件传播，向下面这样，会发生什么事情呢？
$(clickMe).on(click,function(){ $(popover).show(); $(document).one(click,funtion(){ $(popover).hide(); });});
当然了，和之前一样，什么事情也不会发生，那当我点击按钮之后里面都发生了那些事情呢？
当我点击了按钮之后，它会做两件事情，首先把popover`show出来，然后把hide函数添加到document上面，当事件传播到document`，就会又把它给隐藏了。
可以给它添加一个setTimeout()函数来解决这个问题
$(clickMe).on(click,function(){ $(popover).show(); setTimeout(function(){ $(document).one(click,function(){ $(popover).hide(); }) },0)});
setTimeout(fn,0)这个0不是马上执行，而是尽快执行，具体是在冒泡结束在执行这里的函数，也就是说，当冒泡结束后，在把监听事件添加到document上面，等待用户下次点击在执行。
总结：
同时监听button和document，点啥都没反应，因为两个函数都执行了，用阻止事件传播解决了，比较浪费内存
好一定的方法是用jQuery 做，点击button后在监听document，关闭了就不再监听，不阻止事件传播，点啥也没反应，两种解决方法：一种是阻止事件传播，另一种是添加一个setTimeout()函数。
