jQuery 点击其他区域关闭弹出窗体效果实现

以前尝试过用body来,结果由于冒泡的缘故,导致就算点击,也会被body中的点击事件覆盖导致根本无法弹出窗体。

于是去查了一下:

$(document).mouseup(function(e){
  var _con = $(' 目标区域 ');   // 设置目标区域
  if(!_con.is(e.target) && _con.has(e.target).length === 0){ // Mark 1
    some code...   // 功能代码
  }
});
/* Mark 1 的原理:
判断点击事件发生在区域外的条件是:
1. 点击事件的对象不是目标区域本身
2. 事件对象同时也不是目标区域的子元素
*/

关于点击空白关闭弹窗的js写法推荐?看到的,里面有许多方法, 这是其中一种,感觉也挺好的。

关于ishas,按照字面上来读就好了:
关于is: http://api.jquery.com/is/
关于has: http://api.jquery.com/has/

关于target,我们已经知道event是什么东西了,那么target呢?

target 事件属性可返回事件的目标节点(触发该事件的节点),如生成事件的元素、文档或窗口。

可见:https://developer.mozilla.org/en-US/docs/Web/API/event.target
当然也可以看http://www.w3school.com.cn/jsref/event_target.asp

植入部分

如果您觉得文章不错,可以通过赞助支持我。

如果您不希望打赏,也可以通过关闭广告屏蔽插件的形式帮助网站运作。

标签: 知识, 代码段, 语法, jQuery

添加新评论