点击弹出层之外的任何区域隐藏弹出层

修改了原先页面的一个下拉框的功能,用div弹出层来模拟select的原始功能,好处是可以任意的修改下拉框的样式,例如设置它的高度等等(IE中不允许设置原始的select元素的高度),坏处是兼容问题一大堆,不过还好兼容问题不算太麻烦,期间还遇到了一个问题:如何在弹出层弹出以后,点击弹出层之外的任意区域隐藏弹出层

此种场景肯定存在几个必须存在的要素:

要素一:触发元素;

要素二:触发元素的Click事件;

要素三:弹出层;

场景流程:

Click -> 触发元素 -> 弹出层

解决方案:(用伪代码表示下)

1 var Obj = 触发元素;
2 Obj.hover(function(){
3 $('body').unbind('mousedown');
4 }, function(){
5 $('body').bind('mousedown', function(){
6 ...这个匿名函数里调用隐藏弹出层的代码...
7 });
8 });

 即:在鼠标悬浮于触发元素之上的时候,为body解除mousedown的事件绑定;移出的时候再为body元素绑定mousedown事件;

为什么要选用mousedown事件呢(而不用click事件)?这应该是为了防止事件冒泡对触发元素的click事件产生不可预知的干扰,经测试,代码运行正常。

posted @ 2011-06-29 22:59  无墨来点睛  Views(3233)  Comments(2Edit  收藏  举报