JS实现点击弹出层再点击任意位置隐藏弹出层教程

2020-12-23 0 546

我们经常使用到弹出层。对于弹出层,原本的意义就是增加与用户的交互,提升用户的好感度。我们在使用的时候需要注意几个弹出层的注意点:

弹出层的界面需要统一,不一致的弹出层并不能增加美感,相反还会显得页面布局更加杂乱无章;

弹出层的设计一定要好看,按钮要符合项目的主色调;

弹出层的宽度固定屏幕占比,设置max-width,高度根据内容自适应;

点击其他区域能隐藏弹出层。

今天,主要说说点击其他区域隐藏弹出层 什么是事件冒泡?为什么要使用它?

事件冒泡:由最具体的元素接收(当前节点),然后逐级向上传播至最不具体的元素的节点(document);

在实现点击其他区域隐藏弹出层时,需要对document绑定点击事件,而事件冒泡会使点击其它节点时仍然触发该事件,从而造成事件冲突,导致该显示弹出层时显示不出,不该隐藏时却又隐藏了弹出层。。余斗被这个效果折磨了很久,皆是因为对事件冒泡的理解不够已经错误处理。


 


 

说明:

$(document)即给整个文档绑定点击事件,点击则隐藏弹出层container;

$(“button”)给按钮绑定点击事件,点击即显示弹出层container;

此处必须加event.stopPropagation()阻止冒泡,否则先执行button的事件显示弹出层container,又向上冒泡执行document事件隐藏弹出层container,导致最终点击没有效果;

$(“.layer-main”)给弹出层main绑定点击事件,点击它或冒泡到它时,即阻止继续冒泡到document;

此处的点击事件以及阻止冒泡必须加,否则点击弹出层main或里面的其他节点,都会冒泡到document,从而隐藏弹出层container,导致事件紊乱。

其实,还可以通过事件的目标(event.target)来识别当前点击的节点,从而进行接下来的操作,比如对指定的节点的特殊操作

==>>除指定区域外点击任何区域都隐藏div:

$('body').click(function(e) {
        var target = $(e.target);
        // 如果#layer或者#btn下面还有子元素,可使用
        // !target.is('#btn *') && !target.is('#layer *')
        if(!target.is('#btn') && !target.is('#layer')) {
              if ( $('#layer').is(':visible') ) {
                        $('#layer').hide();
              }
        }
});
 
$('body').click(function(e) {
      if(e.target.id != 'btn' && e.target.id != 'overlay')
            if ( $('#layer').is(':visible') ) {
                  $('#layer').hide();
            }
})
收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

1、如非特殊说明,本站对本文提供的代码或者素材不拥有任何权利,其版权归原著者拥有。
2、以上提供的代码或者素材均为作者提供和网友推荐收集整理而来,仅供学习和研究使用。
3、如有侵犯你版权的,请来信(邮箱:admin@mail.52muban.com)指出,核实后,本站将立即改正。
4、如有链接无法下载、失效或广告,请点击下面的报错或者联系我们处理!
5、以上资源售价只是赞助,不代表代码或者素材本身价格。收取费用仅维持本站的日常运营所需!

我爱模板网 建站经验 JS实现点击弹出层再点击任意位置隐藏弹出层教程 https://www.52muban.com/11168.html

专注网站开发,建设。

常见问题
  • 我们承诺演示效果图均和网站一模一样,如有不同,全额退款,并且我们的模板和数据都没有留后门,请放心使用。
查看详情
  • 本站所有源码版权归原作者所有,我爱模板网提供的源码只能用于学习研究,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。
查看详情

相关文章

官方客服团队

为您解决烦忧 - 24小时在线 专业服务