点击空白关闭弹窗

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

原理:

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

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

关键代码:

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

参考

  • 关于点击空白关闭弹窗的js语句

你可能感兴趣的:(点击空白关闭弹窗)