Javascript小知识点（五）：移动端控制点击别的地方，隐藏页面弹框

最新推荐文章于 2023-01-03 15:52:09 发布

baizaozao

最新推荐文章于 2023-01-03 15:52:09 发布

阅读量3.3k

点赞数 1

分类专栏： Javascript 文章标签： javascript

本文链接：https://blog.csdn.net/baizaozao/article/details/79643171

版权

在PC端，通过为document添加点击事件并判断点击目标是否包含弹框div来控制弹框隐藏。但在移动端，尤其是iOS，body和document不支持click事件。解决方法是启用div等元素对click事件的响应，使它们能报告给body，从而实现点击其他地方隐藏弹框的功能。

摘要由CSDN通过智能技术生成

在PC端实现思路是这样的

为document添加点击事件
判断点击的参数 event.target中是否包含该弹框相关的div
如果包含，则不作任何操作
如果不包含，则直接设置该div隐藏
代码如下

    //当下拉框失去焦点时，关闭
    $('body').click(function (e) {
   
        // 触发该事件的直接元素
        var type = e.target;
        // 点击其他地方，悬浮框失去焦点隐藏,3种情况
        // 1、点击的不是作者名称；2、点击的不是悬浮框；3、点击的直接元素不是悬浮框内某一个子元素
        if ((type.className != "jo-name-text")
          && (type.className != "jo-