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 相关文章推荐
Javascript创建Silverlight Plugin以及自定义nonSilverlight和lowSilverlight样式
Jun 28 Javascript
Jquery获取复选框被选中值的简单方法
Jul 04 Javascript
使用微信内置浏览器点击下拉框出现页面乱跳转现象(iphone),该怎么办
Jan 04 Javascript
AngularJS变量及过滤器Filter用法分析
Nov 22 Javascript
JS实现旋转木马式图片轮播效果
Jan 18 Javascript
Bootstrap显示与隐藏简单实现代码
Mar 06 Javascript
JavaScript 事件流、事件处理程序及事件对象总结
Apr 01 Javascript
基于jquery实现多级菜单效果
Jul 25 jQuery
基于LayUI分页和LayUI laypage分页的使用示例
Aug 02 Javascript
探讨Vue.js的组件和模板
Oct 27 Javascript
vue小白入门教程
Apr 02 Javascript
Vue搭建后台系统需要注意的问题
Nov 08 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翻页类
2009/06/01 PHP
深入PHP变量存储的详解
2013/06/13 PHP
PHP static局部静态变量和全局静态变量总结
2014/03/02 PHP
Nginx服务器上安装并配置PHPMyAdmin的教程
2015/08/18 PHP
Symfony实现行为和模板中取得request参数的方法
2016/03/17 PHP
PHP预定义超全局数组变量小结
2018/08/20 PHP
微信公众平台开发教程②微信端分享功能图文详解
2019/04/10 PHP
ashx文件获取$.ajax()方法发送的数据
2016/05/26 Javascript
Cpage.js给组件绑定事件的实现代码
2017/08/31 Javascript
浅谈Redux中间件的实践
2018/07/27 Javascript
一个因@click.stop引发的bug的解决
2019/01/08 Javascript
实例分析Array.from(arr)与[...arr]到底有何不同
2019/04/09 Javascript
nodejs通过钉钉群机器人推送消息的实现代码
2019/05/05 NodeJs
微信小程序自定义tabbar custom-tab-bar 6s出不来解决方案(cover-view不兼容)
2019/11/01 Javascript
[51:17]VGJ.T vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python中使用OpenCV库来进行简单的气象学遥感影像计算
2016/02/19 Python
浅谈Python黑帽子取代netcat
2018/02/10 Python
python reverse反转部分数组的实例
2018/12/13 Python
详解Python 函数如何重载?
2019/04/23 Python
django的settings中设置中文支持的实现
2019/04/28 Python
python模块和包的应用BASE_PATH使用解析
2019/12/14 Python
Python OpenCV读取显示视频的方法示例
2020/02/20 Python
python代码xml转txt实例
2020/03/10 Python
浅谈Python3中print函数的换行
2020/08/05 Python
详解python中的lambda与sorted函数
2020/09/04 Python
基于Django集成CAS实现流程详解
2020/11/28 Python
Adobe Html5 Extension开发初体验图文教程
2017/11/14 HTML / CSS
将一个文本文件的内容按倒序打印出来
2015/01/05 面试题
艺术应用与设计专业个人的自我评价
2013/11/19 职场文书
采购部部门职责
2013/12/15 职场文书
毕业生自荐书
2014/02/03 职场文书
安全生产计划书
2014/05/04 职场文书
公开承诺书格式
2014/05/21 职场文书
队列队形口号
2015/12/25 职场文书
pyqt5蒙版遮罩mask,setmask的使用
2021/06/11 Python
分享CSS盒子模型隐藏的几种方式
2022/02/28 HTML / CSS