01-鼠标点击空白处实现层隐藏
在做前端一些特效时,我们的场景中会经常遇到这种情况,当我点击某一个按钮弹出了一个层时,现在点击空白处或者准确的说点击这个层以外的位置实现层隐藏。
首先我需要知道鼠标点击处是否在这个层上,需要通过计算点击位置的宽和高时候在层宽高的范围之内。
方法:
var elementDiv=$(显示层);
var tempoint = divpanel.offset();//获取层的坐标
//e为当前点击元素(需要document)
if (e.pageX > (tempoint.left + elementDiv.width()) || e.pageX < tempoint.left || e.pageY > (tempoint.top + elementDiv.height()) || e.pageY < tempoint.top)
true为点击处在显示层外。
实现:
function (selector, id, func) {
$(document).unbind("click");//为了避免一些不必要的绑定事件所以绑定前先给document解除click绑定
$(document).bind("click", function (e) {
var divpanel = $( id);
var tempoint = divpanel.offset();
if (e.pageX > (tempoint.left + divpanel.width()) || e.pageX < tempoint.left || e.pageY > (tempoint.top + divpanel.height()) || e.pageY < tempoint.top) {
if (e.target != $(selector)) {
divpanel.hide();
if (func) {
func();
}
$(document).unbind("click");
}}});}
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步