首页 > 其他 > 详细

01-鼠标点击空白处实现层隐藏

时间:2014-04-30 07:14:46      阅读:385      评论:0      收藏:0      [点我收藏+]

在做前端一些特效时,我们的场景中会经常遇到这种情况,当我点击某一个按钮弹出了一个层时,现在点击空白处或者准确的说点击这个层以外的位置实现层隐藏。

首先我需要知道鼠标点击处是否在这个层上,需要通过计算点击位置的宽和高时候在层宽高的范围之内。

方法:

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");

}}});}

01-鼠标点击空白处实现层隐藏,布布扣,bubuko.com

01-鼠标点击空白处实现层隐藏

原文:http://www.cnblogs.com/ffeng/p/3689237.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!