修改了原先页面的一个下拉框的功能,用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事件产生不可预知的干扰,经测试,代码运行正常。