分享一个实用且常见的技能，你一定用得着

自从第一天开始写微信公众号文章，每天脑海里都在不断的想明天我到底要分享什么，到底什么才是真正可以帮到大家的东西，现在突然感觉有句话其实说错了，“万事开头难”，这句话真心不对啊，就像写文章这种事，开头很容易嘛，真正难的是一直坚持下去好吗！

昨天在写一个项目的时候，有一个交互效果，我感觉有必要分享给大家，因为这是一个常用且实用的效果，有了它我不能保证你很牛逼，但是至少可以很快的满足这个需求。到底是什么效果？我们来往下看吧。

首先我把设计图拿上来给大家看一看。

其实就是一个很简单很常见的登录框，这个登录框默认是没有的，只有点击页面上的登录按钮的时候才会弹出它和背后的遮罩层来。

其实要的交互很简单，就是点击除了登录框之外的任何地方这个层都消失，也就是说点击白色下面的遮罩层就会触发登录窗口消失。我这里的做法是登录框包含在遮罩层的里面的，比如

利用rgba的方式写透明，可以让背景透明而内容不会透明。前段时间分享过一篇关于js事件冒泡的文章，这里正好就涉及到了事件冒泡。我们如果直接写点击透明层移除登录框，在这里是不行的，因为登录框是属于透明层的子元素，它的事件会冒泡到父级，也就是点击任何地方都会触发这个隐藏。那我们到底该怎么做呢？请继续往下看。

首先需要获取到登录框的dom，然后我们需要防止事件冒泡

简而言之，看代码吧！

代码如下：

$(document).bind("click",function(e){

         var target = $(e.target);

         if(target.closest("登录框").length == 0){ //登录框表示例外元素

             $("遮罩层整体").hide(); //遮罩层整体表示隐藏的元素

          }

});

就这么一点代码，但是这个场景可能会在很多地方以不同的形态出现，希望大家可以举一反三，不要局限于这一点。

如果对我的分享有兴趣，欢迎随手关注我的微信公众号：xuebing_wxb