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 相关文章推荐
window.open的页面如何刷新(父页面)上层页面
Dec 28 Javascript
html5 canvas js(数字时钟)实例代码
Dec 23 Javascript
javascript日期格式化示例分享
Mar 05 Javascript
jQuery获取页面元素绝对与相对位置的方法
Jun 10 Javascript
利用jquery制作滚动到指定位置触发动画
Mar 26 Javascript
Web制作验证码功能实例代码
Jun 19 Javascript
微信小程序-getUserInfo回调的实例详解
Oct 27 Javascript
关于vue状态过渡transition不起作用的原因解决
Apr 09 Javascript
对layui中的onevent 和event的使用详解
Sep 06 Javascript
详解ECMAScript2019/ES10新属性
Dec 06 Javascript
js 计数排序的实现示例(升级版)
Jan 12 Javascript
jQuery实现鼠标拖动图片功能
Mar 04 jQuery
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导入Excel到MySQL的方法
2011/04/23 PHP
无需重新编译php加入ftp扩展的解决方法
2013/02/07 PHP
基于PHPExcel的常用方法总结
2013/06/13 PHP
ucenter通信原理分析
2015/01/09 PHP
经典PHP加密解密函数Authcode()修复版代码
2015/04/05 PHP
php实现的错误处理封装类实例
2017/06/20 PHP
基于laravel-admin 后台 列表标签背景的使用方法
2019/10/03 PHP
用javascript实现改变TEXTAREA滚动条和按钮的颜色,以及怎样让滚动条变得扁平
2007/04/20 Javascript
url参数中有+、空格、=、%、&amp;、#等特殊符号的问题解决
2013/05/15 Javascript
jquery checkbox 勾选的bug问题解决方案与分析
2014/11/13 Javascript
AngularJS入门知识之MVW类框架的编程思想探讨
2014/12/08 Javascript
JavaScript数组迭代器实例分析
2015/06/09 Javascript
Nodejs实战心得之eventproxy模块控制并发
2015/10/27 NodeJs
JavaScript运行过程中的“预编译阶段”和“执行阶段”
2015/12/16 Javascript
AngularJS路由删除#符号解决的办法
2017/09/28 Javascript
小程序自定义日历效果
2018/12/29 Javascript
如何基于vue-cli3.0构建功能完善的移动端架子
2019/04/24 Javascript
.netcore+vue 实现压缩文件下载功能
2020/09/24 Javascript
Python的函数的一些高阶特性
2015/04/27 Python
python决策树之CART分类回归树详解
2017/12/20 Python
python使用 cx_Oracle 模块进行查询操作示例
2019/11/28 Python
python中的split()函数和os.path.split()函数使用详解
2019/12/21 Python
Python分析微信好友性别比例和省份城市分布比例的方法示例【基于itchat模块】
2020/05/29 Python
pycharm中如何自定义设置通过“ctrl+滚轮”进行放大和缩小实现方法
2020/09/16 Python
西班牙汉普顿小姐:购买帆布鞋和太阳镜
2016/10/23 全球购物
应届生妇产科护士求职信
2013/10/27 职场文书
党的群众路线教育实践活动心得体会
2014/03/03 职场文书
汉语言文学毕业生自荐信范文
2014/03/24 职场文书
《狼和小羊》教学反思
2014/04/20 职场文书
2014年乡镇安全生产工作总结
2014/12/02 职场文书
2015年禁毒宣传活动总结
2015/03/25 职场文书
商务宴会祝酒词
2015/08/11 职场文书
小学科学课教学反思
2016/02/23 职场文书
详解MySQL中的主键与事务
2021/05/27 MySQL
vue 给数组添加新对象并赋值
2022/04/20 Vue.js
Go中使用gjson来操作JSON数据的实现
2022/08/14 Golang