|
正文开始 传统做法：
1.全局绑定鼠标点击事件，向上查找对象，如果点击的对象中不包含当前对象则关闭。例子：某editor编辑器
2. 全局队列写入当前菜单 点击body时 一次遍历关闭。
优雅一点：
利用btn或input的focus和blur事件。以下简称这个对焦的按钮为btn。
下拉菜单监听鼠标经过和移出动作，记录状态为临时变量：mouseIsHover;
展开下拉菜单时 给btn对焦；
btn丢焦时判断鼠标是否在下拉菜单里面(mouseIsHover)，在菜单里(mouseIsHover==true)则执行强制恢复btn的对焦,便于下次监听到blur事件，
不在菜单里(mouseIsHover==false)则执行500毫秒后关闭菜单，因为点击链接或其他dom时会有一定响应延时。
参考代码
~~~
obj._rlMenu = $('');
$('body').append(obj._rlMenu);
var mouseIsHover = false;
obj._rlMenu.on({
'mouseenter': function () {
mouseIsHover = true;
},
'mouseleave': function () {
mouseIsHover = false;
},
})
riliInput.on({
'blur': function () {
if(!mouseIsHover) {
setTimeout(function () {
obj._rlMenu.hide();
}, 100);
} else {
//每次选择 要给按钮对焦 这样鼠标点击外部就可以触发关闭下拉层
riliInput.focus();
}
},
});
~~~
正文结束 |
| js 正则替换返回值做回调函数 | jquery.scrollify.1.0.9.js 屏幕会抖动的问题 与使用方法 |