扩展Jquery插件处理mouseover时内部有子元素时发生样式闪烁


Posted in Javascript onDecember 08, 2011

解决思路如下:
首先,判断事件的当前节点,也就是jquery的currentTarget是否在target的包含中,即下面的扩展$.containsNode。
然后,在调用hover的时候的mouseover和mouseout事件里判断currentTarget是否在target的包含中,即$.fn.fhover扩展
下面就是相关代码:

$.containsNode = function(parentNode, childNode) { 
if (parentNode.contains) { 
return parentNode != childNode && parentNode.contains(childNode); 
} else { 
return !!(parentNode.compareDocumentPosition(childNode) & 16); 
} 
} 
$.fn.fhover = function(over, out) { 
this.hover(function(e) { 
if ($.containsNode(e.target, e.currentTarget)) { 
return; 
} 
over.call(this, e); 
}, function(e) { 
if ($.containsNode(e.target, e.currentTarget)) { 
return; 
} 
out.call(this, e); 
}); 
return this; 
}
Javascript 相关文章推荐
js 数值转换为3位逗号分隔的示例代码
Feb 19 Javascript
jQuery中next()方法用法实例
Jan 07 Javascript
jQuery实现自定义checkbox和radio样式
Jul 13 Javascript
基于javascript代码实现通过点击图片显示原图片
Nov 29 Javascript
详解Webwork中Action 调用的方法
Feb 02 Javascript
JS实现iframe编辑器光标位置插入内容的方法(兼容IE和Firefox)
Jun 24 Javascript
javascript十六进制数字和ASCII字符之间的转换方法
Dec 27 Javascript
JavaScript多线程运行库Nexus.js详解
Dec 22 Javascript
在vue中使用css modules替代scroped的方法
Mar 10 Javascript
Layui数据表格之获取表格中所有的数据方法
Aug 20 Javascript
JS实现选项卡效果的代码实例
May 20 Javascript
JavaScript实现拖拽和缩放效果
Aug 24 Javascript
js中document.getElementByid、document.all和document.layers区分介绍
Dec 08 #Javascript
基于jquery的代码显示区域自动拉长效果
Dec 07 #Javascript
5个javascript的数字格式化函数分享
Dec 07 #Javascript
TimergliderJS 一个基于jQuery的时间轴插件
Dec 07 #Javascript
autoPlay 基于jquery的图片自动播放效果
Dec 07 #Javascript
浅析Prototype的模板类 Template
Dec 07 #Javascript
js 幻灯片的实现
Dec 06 #Javascript
You might like
用PHP+MySql编写聊天室
2006/10/09 PHP
开启CURL扩展,让服务器支持PHP curl函数(远程采集)
2011/03/19 PHP
PHP+MySQL之Insert Into数据插入用法分析
2015/09/27 PHP
Laravel 5.3 学习笔记之 错误&日志
2016/08/28 PHP
php array_reverse 以相反的顺序返回数组实例代码
2017/04/11 PHP
laravel 框架配置404等异常页面
2019/01/07 PHP
Javascript 键盘事件的组合使用实现代码
2012/05/04 Javascript
jquery等宽输出文字插件使用介绍
2013/09/18 Javascript
js读取注册表的键值示例
2013/09/25 Javascript
Jquery实现控件的隐藏和显示实例
2014/02/08 Javascript
JS实现很酷的水波文字特效实例
2015/02/26 Javascript
JavaScript控制网页平滑滚动到指定元素位置的方法
2015/04/17 Javascript
详解jQuery中的empty、remove和detach
2016/04/11 Javascript
基于jQuery ligerUI实现分页样式
2016/09/18 Javascript
微信小程序 仿猫眼实现实例代码
2017/03/14 Javascript
vue实现键盘输入支付密码功能
2018/08/18 Javascript
vue基于Echarts的拖拽数据可视化功能实现
2020/12/04 Vue.js
微信小程序实现登录注册功能
2020/12/29 Javascript
[57:16]2014 DOTA2华西杯精英邀请赛 5 25 LGD VS VG第二场
2014/05/26 DOTA
Python 文件操作技巧(File operation) 实例代码分析
2008/08/11 Python
python函数返回多个值的示例方法
2013/12/04 Python
python中使用urllib2伪造HTTP报头的2个方法
2014/07/07 Python
python获取局域网占带宽最大3个ip的方法
2015/07/09 Python
详解Python实现按任意键继续/退出的功能
2016/08/19 Python
解决python3读取Python2存储的pickle文件问题
2018/10/25 Python
python 构造三维全零数组的方法
2018/11/12 Python
django连接mysql数据库及建表操作实例详解
2019/12/10 Python
python 实现list或string按指定分段
2019/12/25 Python
Python趣味实例,实现一个简单的抽奖刮刮卡
2020/07/18 Python
python判断一个变量是否已经设置的方法
2020/08/13 Python
澳大利亚排名第一的狂热牛仔品牌:ONETEASPOON
2018/11/20 全球购物
运动会领导邀请函
2014/01/10 职场文书
青蓝工程实施方案
2014/03/27 职场文书
大专毕业生求职信
2014/07/05 职场文书
毕业论文答辩开场白和答辩技巧
2015/05/27 职场文书
搞笑婚庆主持词
2015/06/29 职场文书