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技术-屏蔽类
Aug 15 Javascript
javascript实现上传图片前的预览(TX的面试题)
Aug 20 Javascript
用js做一个小游戏平台 (一)
Dec 29 Javascript
jQuery的$.proxy()应用示例介绍
Apr 03 Javascript
使用jQuery重置(reset)表单的方法
May 05 Javascript
js格式化输入框内金额、银行卡号
Feb 01 Javascript
jQuery扩展+xml实现表单验证功能的方法
Dec 25 Javascript
解决Vue编译时写在style中的路径问题
Sep 21 Javascript
Vue + Vue-router 同名路由切换数据不更新的方法
Nov 20 Javascript
vue.js默认路由不加载linkActiveClass问题的解决方法
Dec 11 Javascript
VUE重点问题总结
Mar 19 Javascript
Vuex中实现数据状态查询与更改
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
解析CI即CodeIgniter框架在Nginx下的重写规则
2013/06/03 PHP
php通过session防url攻击方法
2014/12/10 PHP
php中异常处理方法小结
2015/01/09 PHP
一页面多XMLHttpRequest对象
2007/01/22 Javascript
js操作iframe的一些方法介绍
2013/06/25 Javascript
用unescape反编码得出汉字示例
2014/04/24 Javascript
node.js开机自启动脚本文件
2014/12/24 Javascript
JS产生随机数的几个用法详解
2016/06/22 Javascript
微信小程序 教程之WXML
2016/10/18 Javascript
jQuery实现获取h1-h6标题元素值的方法
2017/03/06 Javascript
MUI实现上拉加载和下拉刷新效果
2017/06/30 Javascript
JavaScript实现的前端AES加密解密功能【基于CryptoJS】
2018/08/28 Javascript
小程序获取周围IBeacon设备的方法
2018/10/31 Javascript
详解vuex commit保存数据技巧
2018/12/25 Javascript
泛谈JS逻辑判断选择器 || &amp;&amp;
2019/05/24 Javascript
jquery实现动态改变css样式的方法分析
2019/05/27 jQuery
详解vue 动态加载并注册组件且通过 render动态创建该组件
2019/05/30 Javascript
Node使用Nodemailer发送邮件的方法实现
2020/02/24 Javascript
Vue与React的区别和优势对比
2020/12/18 Vue.js
[18:32]DOTA2 HEROS教学视频教你分分钟做大人-谜团
2014/06/12 DOTA
[23:18]Spirit vs Liquid Supermajor小组赛A组 BO3 第二场 6.2
2018/06/03 DOTA
python基于pygame实现响应游戏中事件的方法(附源码)
2015/11/11 Python
对Python 除法负数取商的取整方式详解
2018/12/12 Python
django数据模型(Model)的字段类型解析
2019/12/25 Python
PyQt5 closeEvent关闭事件退出提示框原理解析
2020/01/08 Python
浅谈django channels 路由误导
2020/05/28 Python
python获得命令行输入的参数的两种方式
2020/11/02 Python
Django中ORM的基本使用教程
2020/12/22 Python
python实现双人五子棋(终端版)
2020/12/30 Python
Python就将所有的英文单词首字母变成大写
2021/02/12 Python
HTML5 Web缓存和运用程序缓存(cookie,session)
2018/01/11 HTML / CSS
Chain Reaction Cycles芬兰:世界上最大的在线自行车商店
2017/12/06 全球购物
乡镇综治宣传月活动总结
2014/07/02 职场文书
2014年个人教学工作总结
2014/12/09 职场文书
2015年大学生实习评语
2015/03/25 职场文书
Nginx报404错误的详细解决方法
2022/07/23 Servers