jQuery中多个元素的Hover事件解决方案


Posted in Javascript onJune 12, 2014

1.需求简介

jQuery的hover事件只是针对单个HTML元素,例如:

$('#login').hover(fun2, fun2);

当鼠标进入#login元素时调用fun1函数,离开时则调用fun2函数,这种API已能够满足绝大部分需求。

不过,有些时候我们希望当鼠标进入两个或多个元素时触发fun1,离开他们时触发fun2,而在这些元素间移动鼠标并不触发任何事件。例如两个元素紧挨着的HTML元素,如下图:

jQuery中多个元素的Hover事件解决方案 

当鼠标进入二者的区域时触发fun1,离开时触发fun2。你也许会想到使用下面的方式

$('#trigger, #drop'),hover(fun1, fun2);

这种方式并不能满足我们的需求,因为从#trigger进入#drop时会触发fun2和fun1。要解决这个问题,一种比较简单的方式是更改HTML结构,实现方式如下:
<div id="container"> 
<div id="trigger"></div> 
<div id="drop"></div> 
</div> $('#container').hover(fun1, fun2);

这样通过在父元素上绑定hover事件来实现此功能。

2.示例研究

下图为常见的下拉菜单简化图,HTML结构如下:

jQuery中多个元素的Hover事件解决方案 

ul id="#nav"> 
<li></li> 
<li></li> 
<li id="droplist"> 
<span>下拉菜单</span> 
<ul> 
<li>下拉项1</li> 
<li>下拉项2</li> 
<li>下拉项3</li> 
<ul> 
</li> 
<li></li> 
</ul>

实现的JavaScrip程序也是非常简单
$('#droplist').hover(function(){ 
$(this).find('ul').show(); 
}, function(){ 
$(this).find('ul').hide(); 
});

这种实现方式逻辑清晰,但导致HTML嵌套层级过多,书写CSS时出现了许多不便。例如:
#nav li { font-size:14px; }

我们希望这段CSS为第一层li元素设置14像素字体,但是其也作用于了第二层元素,所以不得不使用下面的语句改写过来
#nav li li { font-size:12px; }

3.解决方案

更改HTML结构

<ul id="#nav"> 
<li></li> 
<li></li> 
<li id="trigger">下拉菜单</li> 
<li></li> 
</ul> 
<ul id="drop"> 
<li>下拉项1</li> 
<li>下拉项2</li> 
<li>下拉项3</li> 
<ul>

依次引入JS文件
<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript" src="js/jquery.mixhover.js"></script>

控制代码
$.mixhover( 
'#trigger', 
'#drop', 
function(trg, drop){ 
#(drop).show(); 
}, 
function(trg, drop){ 
#(drop).hide(); 
} 
)

这样当鼠标进入#trigger时将#drop显示出来,鼠标从#trigger移如#drop时不会触发任何事件,实际上就是讲#trigger和#drop元素当做一个元素来处理。

jquery.mixhover.js程序如下

/** 
* Author: http://rainman.cnblogs.com/ 
* Date: 2014-06-06 
* Depend: jQuery 
*/ 
$.mixhover = function() { 
// 整理参数 $.mixhover($e1, $e2, handleIn, handleOut) 
var parms; 
var length = arguments.length; 
var handleIn = arguments[length - 2]; 
var handleOut = arguments[length - 1]; 
if ($.isFunction(handleIn) && $.isFunction(handleOut)) { 
parms = Array.prototype.slice.call(arguments, 0, length - 2); 
} else if ($.isFunction(handleOut)) { 
parms = Array.prototype.slice.call(arguments, 0, length - 1); 
handleIn = arguments[length - 1]; 
handleOut = null; 
} else { 
parms = arguments; 
handleIn = null; 
handleOut = null; 
} // 整理参数 使得elements依次对应 
var elems = []; 
for (var i = 0, len = parms.length; i < len; i++) { 
elems[i] = []; 
var p = parms[i]; 
if (p.constructor === String) { 
p = $(p); 
} 
if (p.constructor === $ || p.constructor === Array) { 
for (var j = 0, size = p.length; j < size; j++) { 
elems[i].push(p[j]); 
} 
} else { 
elems[i].push(p); 
} 
} 
// 绑定Hover事件 
for (var i = 0, len = elems[0].length; i < len; i++) { 
var arr = []; 
for (var j = 0, size = elems.length; j < size; j++) { 
arr.push(elems[j][i]); 
} 
$._mixhover(arr, handleIn, handleOut); 
} 
}; 
$._mixhover = function(elems, handleIn, handleOut) { 
var isIn = false, timer; 
$(elems).hover(function() { 
window.clearTimeout(timer); 
if (isIn === false) { 
handleIn && handleIn.apply(elems, elems); 
isIn = true; 
} 
}, 
function() { 
timer = window.setTimeout(function() { 
handleOut && handleOut.apply(elems, elems); 
isIn = false; 
}, 10); 
}); 
};
Javascript 相关文章推荐
用正则xmlHttp实现的偷(转)
Jan 22 Javascript
JavaScript触发器详解
Mar 10 Javascript
jquery 新浪网易的评论块制作
Jul 01 Javascript
eval的两组性能测试数据
Aug 17 Javascript
使用jquery动态加载javascript以减少服务器压力
Oct 29 Javascript
用js代码改变单选框选中状态的简单实例
Dec 18 Javascript
js不能获取隐藏的div的宽度只能先显示后获取
Sep 04 Javascript
Node.js程序中的本地文件操作用法小结
Mar 06 Javascript
基于javascript实现句子翻牌网页版小游戏
Mar 23 Javascript
分享javascript、jquery实用代码段
Oct 20 Javascript
JSONP原理及应用实例详解
Sep 13 Javascript
vue 框架下自定义滚动条(easyscroll)实现方法
Aug 29 Javascript
js获取当前页面的url网址信息
Jun 12 #Javascript
jquery 3D 标签云示例代码
Jun 12 #Javascript
javascript面向对象特性代码实例
Jun 12 #Javascript
如何让浏览器支持jquery ajax load 前进、后退功能
Jun 12 #Javascript
js创建一个input数组并绑定click事件的方法
Jun 12 #Javascript
javascript实现阻止iOS APP中的链接打开Safari浏览器
Jun 12 #Javascript
jQuery实现复选框全选/取消全选/反选及获得选择的值
Jun 12 #Javascript
You might like
PHP高级对象构建 工厂模式的使用
2012/02/05 PHP
CodeIgniter钩子用法实例详解
2016/01/20 PHP
javascript正则表达式中参数g(全局)的作用
2010/11/11 Javascript
jQuery.get、jQuery.getJSON、jQuery.post无法返回JSON问题的解决方法
2011/07/28 Javascript
js抽奖实现随机抽奖代码效果
2013/12/02 Javascript
Iframe 自动适应页面的高度示例代码
2014/02/26 Javascript
3种Jquery限制文本框只能输入数字字母的方法
2014/12/03 Javascript
jQuery实现文本展开收缩特效
2015/06/03 Javascript
JavaScript电子时钟倒计时第二款
2016/01/10 Javascript
详解支持Angular 2的表格控件
2017/01/19 Javascript
vue input输入框模糊查询的示例代码
2018/05/22 Javascript
详解如何在vue项目中使用eslint+prettier格式化代码
2018/11/10 Javascript
js实现拖拽与碰撞检测
2020/09/18 Javascript
[01:14]3.19DOTA2发布会 三代刀塔人第二代
2014/03/25 DOTA
创建pycharm的自定义python模板方法
2018/05/23 Python
Python3模拟登录操作实例分析
2019/03/12 Python
Django框架模板文件使用及模板文件加载顺序分析
2019/05/23 Python
如何将 awk 脚本移植到 Python
2019/12/09 Python
Python使用Pandas库常见操作详解
2020/01/16 Python
利用keras加载训练好的.H5文件,并实现预测图片
2020/01/24 Python
python简单实现最大似然估计&amp;scipy库的使用详解
2020/04/15 Python
python如何进行矩阵运算
2020/06/05 Python
HTML5 canvas基本绘图之文字渲染
2016/06/27 HTML / CSS
美国著名珠宝品牌之一:Jared The Galleria Of Jewelry
2016/10/01 全球购物
Woolworth官网:澳洲第一大超市
2017/06/25 全球购物
优秀大学生推荐信范文
2013/11/28 职场文书
夜不归宿检讨书
2014/02/25 职场文书
鸿星尔克广告词
2014/03/21 职场文书
新学期教师寄语
2014/04/02 职场文书
中学生国旗下讲话稿
2014/04/26 职场文书
保密工作整改报告
2014/11/06 职场文书
家长会欢迎词
2015/01/23 职场文书
放假通知怎么写
2015/08/18 职场文书
学生检讨书范文
2019/06/24 职场文书
python的变量和简单数字类型详解
2021/09/15 Python
索尼ICF-36收音机评测
2022/04/30 无线电