当前位置: 首页 > 编程笔记 >

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

南门嘉
2023-03-14
本文向大家介绍jQuery中多个元素的Hover事件解决方案,包括了jQuery中多个元素的Hover事件解决方案的使用技巧和注意事项,需要的朋友参考一下
1.需求简介
jQuery的hover事件只是针对单个HTML元素,例如:
 
$('#login').hover(fun2, fun2); 

当鼠标进入#login元素时调用fun1函数,离开时则调用fun2函数,这种API已能够满足绝大部分需求。
不过,有些时候我们希望当鼠标进入两个或多个元素时触发fun1,离开他们时触发fun2,而在这些元素间移动鼠标并不触发任何事件。例如两个元素紧挨着的HTML元素,如下图:
 
当鼠标进入二者的区域时触发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结构如下:
 
 
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); 
}); 
}; 
 类似资料:
  • 本文向大家介绍jquery中trigger()无法触发hover事件的解决方法,包括了jquery中trigger()无法触发hover事件的解决方法的使用技巧和注意事项,需要的朋友参考一下 今天做一个项目,遇到了一个问题,是以前没有遇到过的,就此记上一笔。 1、trigger方法解释 官方是这么解释的: 用法: .trigger( eventType [, extraParameters] )

  • 本文向大家介绍JQuery给元素绑定click事件多次执行的解决方法,包括了JQuery给元素绑定click事件多次执行的解决方法的使用技巧和注意事项,需要的朋友参考一下 原绑定方法: 这种方法只会在原click方法中继续添加新方法; 解决办法更改绑定方法为: 在绑定新click方法前对元素所绑定的click方法解绑

  • 本文向大家介绍jquery 新建的元素事件绑定问题解决方案,包括了jquery 新建的元素事件绑定问题解决方案的使用技巧和注意事项,需要的朋友参考一下 js的事件监听跟css不一样,css只要设定好了样式,不论是原来就有的还是新添加的,都有一样的表现。而事件监听不是,你必须给每一个元素单独绑定事件。 常见的例子是处理表格的时候。每行行末有个删除按钮,点了这个能够删除这一行。 通常,我会这么绑定 对

  • 本文向大家介绍解决jquery appaend元素中id绑定事件失效的问题,包括了解决jquery appaend元素中id绑定事件失效的问题的使用技巧和注意事项,需要的朋友参考一下 1. 在jquery中append元素,如果该元素中有id值并且绑定事件,那么该id事件会失效,必须刷新一下才能使用。 2.解决办法: 举例:如果在一个<div class="title"></div>中,通过app

  • 本文向大家介绍jQuery中dom元素上绑定的事件详解,包括了jQuery中dom元素上绑定的事件详解的使用技巧和注意事项,需要的朋友参考一下 作为技术狂热分子的职业本能,看到一个技术产品的功能,总会忍不住想知道它是怎么被实现的。比如我每每看到别人网站一个很炫的界面或者很酷的功能,就忍不住打开了浏览器的控制台。。。 好,不扯远,说说当你想看到网站上某个元素绑定的事件函数的代码时应该怎么做吧。 查看

  • 本文向大家介绍window.onload绑定多个事件的两种解决方案,包括了window.onload绑定多个事件的两种解决方案的使用技巧和注意事项,需要的朋友参考一下 前言 有些函数,必须在网页加载完毕后执行。比如:涉及DOM操作的。 网页加载完毕时会触发一个onload事件,将函数绑定到这个事件上即可。 问题来了:如果需要同时绑定多个事件,该如何处理呢?有两种解决方法 方案一 创建一个匿名函数,