扩展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 相关文章推荐
jquery tablesorter.js 支持中文表格排序改进
Dec 09 Javascript
模拟jQuery ajax服务器端与客户端通信的代码
Mar 28 Javascript
从JQuery源码分析JavaScript函数的apply方法与call方法
Sep 25 Javascript
jQuery中hover方法和toggle方法使用指南
Feb 27 Javascript
JS中递归函数
Jun 17 Javascript
深入理解Javascript中的valueOf与toString
Jan 04 Javascript
jQuery表格(Table)基本操作实例分析
Mar 10 Javascript
从零开始学习Node.js系列教程二:文本提交与显示方法
Apr 13 Javascript
JS获取数组中出现次数最多及第二多元素的方法
Oct 27 Javascript
使用Vue 自定义文件选择器组件的实例代码
Mar 04 Javascript
vue样式穿透 ::v-deep的具体使用
Jun 04 Javascript
原生JS实现pc端轮播图效果
Dec 21 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
建立动态的WML站点(二)
2006/10/09 PHP
destoon实现首页显示供应、企业、资讯条数的方法
2014/07/15 PHP
PHP中strtr字符串替换用法详解
2014/11/26 PHP
Sublime里直接运行PHP配置方法
2014/11/28 PHP
memcache一致性hash的php实现方法
2015/03/05 PHP
分享php分页的功能模块
2015/06/16 PHP
PHP中如何防止外部恶意提交调用ajax接口
2016/04/11 PHP
Laravel 将数据表的数据导出,并生成seeds种子文件的方法
2019/10/09 PHP
jquery 1.3.2 IE8中的一点点的小问题解决方法
2009/07/10 Javascript
javascript parseInt 大改造
2009/09/27 Javascript
node.js 一个简单的页面输出实现代码
2012/03/07 Javascript
点击表单提交时出现jQuery没有权限的解决方法
2014/07/23 Javascript
js获取浏览器基本信息大全
2014/11/27 Javascript
js控制文本框只输入数字和小数点的方法
2015/03/10 Javascript
jQuery结合ajax实现动态加载文本内容
2015/05/19 Javascript
jQuery中$this和$(this)的区别介绍(一看就懂)
2015/07/06 Javascript
深入浅析JavaScript中对事件的三种监听方式
2015/09/29 Javascript
JS根据生日月份和日期计算星座的简单实现方法
2016/11/24 Javascript
利用node.js如何搭建一个简易的即时响应服务器
2017/05/28 Javascript
vue2.0 和 animate.css的结合使用
2017/12/12 Javascript
详解webpack之scss和postcss-loader的配置
2018/01/09 Javascript
微信小程序实现时间进度条功能
2020/11/17 Javascript
[45:18]2018DOTA2亚洲邀请赛 4.3 突围赛 Optic vs iG 第一场
2018/04/04 DOTA
python抓取某汽车网数据解析html存入excel示例
2013/12/04 Python
Python ftp上传文件
2016/02/13 Python
Python tkinter label 更新方法
2018/10/11 Python
基于树莓派的语音对话机器人
2019/06/17 Python
Python Pandas 获取列匹配特定值的行的索引问题
2019/07/01 Python
python实现的分层随机抽样案例
2020/02/25 Python
Django Channel实时推送与聊天的示例代码
2020/04/30 Python
MyFrenchPharma中文网:最大的法国药妆平台
2016/10/07 全球购物
The North Face北面德国官网:美国著名户外品牌
2018/12/12 全球购物
函授毕业生的自我鉴定
2013/11/26 职场文书
购房公证委托书(2014版)
2014/09/12 职场文书
2015年全国科普日活动总结
2015/03/23 职场文书
交通事故案件代理词
2015/05/23 职场文书