美文网首页前端技巧
点击空白关闭弹窗

点击空白关闭弹窗

作者: 恬雅过客 | 来源:发表于2018-09-26 16:27 被阅读0次

    最近做自动补全搜索框,输入时,弹出自动补全的列表弹窗,当我不想选择任何一个列表选项,就会点击其他地方,这时需要关闭补全的列表弹窗。也就引出了点击空白关闭弹窗的问题。

    原理:

    判断点击事件发生在区域外的条件是:

    1. 点击事件的对象不是目标区域本身
    2. 事件对象同时也不是目标区域的子元素

    关键代码:

    $(document).mouseup(function(e){
      var targetObj = $(' 目标区域 ');   // 设置目标区域
      if(!targetObj.is(e.target) && targetObj.has(e.target).length === 0){ 
        //TODO 功能代码
        some code...   
      }
    });
    

    参考

    相关文章

      网友评论

        本文标题:点击空白关闭弹窗

        本文链接:https://www.haomeiwen.com/subject/ojcjoftx.html