扩展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 相关文章推荐
Prototype使用指南之base.js
Jan 10 Javascript
js弹出层永远居中实现思路及代码
Nov 29 Javascript
Js使用WScript.Shell对象执行.bat文件和cmd命令
Dec 18 Javascript
《JavaScript DOM 编程艺术》读书笔记之DOM基础
Jan 09 Javascript
JQuery选择器、过滤器大整理
May 26 Javascript
javascript实现动态表头及表列的展现方法
Jul 14 Javascript
JS简单模拟触发按钮点击功能的方法
Nov 30 Javascript
动态的9*9乘法表效果的实现代码
May 16 Javascript
JQuery 进入页面默认给已赋值的复选框打钩
Mar 23 jQuery
canvas实现弧形可拖动进度条效果
May 11 Javascript
使用electron实现百度网盘悬浮窗口功能的示例代码
Oct 24 Javascript
Node与Python 双向通信的实现代码
Jul 16 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中的日期及时间
2006/11/23 PHP
wamp下修改mysql访问密码的解决方法
2013/05/07 PHP
php使用Header函数,PHP_AUTH_PW和PHP_AUTH_USER做用户验证
2016/05/04 PHP
关于 Laravel Redis 多个进程同时取队列问题详解
2017/12/25 PHP
php JWT在web端中的使用方法教程
2018/09/06 PHP
PHP中有关长整数的一些操作教程
2019/09/11 PHP
js中的eventType事件及其浏览器支持性介绍
2013/11/29 Javascript
js如何设置在iframe框架中指定div不显示
2013/12/04 Javascript
基于jQuery+Cookie实现的防止刷新的在线考试倒计时
2015/06/19 Javascript
javascript实现自动输出文本(打字特效)
2015/08/27 Javascript
JavaScript实现同时调用多个函数的方法
2015/11/09 Javascript
JS实现上下左右对称的九九乘法表
2016/02/22 Javascript
JavaScript String(字符串)对象的简单实例(推荐)
2016/08/31 Javascript
从零开始学习Node.js系列教程五:服务器监听方法示例
2017/04/13 Javascript
理解 javascript 中的函数表达式与函数声明
2017/07/07 Javascript
Vue引入sass并配置全局变量的方法
2018/06/27 Javascript
微信小程序表单弹窗实例
2018/07/19 Javascript
nodejs同步调用获取mysql数据时遇到的大坑
2019/03/02 NodeJs
JS+CSS3实现的简易钟表效果示例
2019/04/13 Javascript
微信小程序 获取手机号 JavaScript解密示例代码详解
2020/05/14 Javascript
Vue两种组件类型:递归组件和动态组件的用法
2020/08/06 Javascript
OpenLayer学习之自定义测量控件
2020/09/28 Javascript
Python正则表达式教程之三:贪婪/非贪婪特性
2017/03/02 Python
python实现石头剪刀布小游戏
2021/01/20 Python
Python提取转移文件夹内所有.jpg文件并查看每一帧的方法
2019/06/27 Python
Python将列表中的元素转化为数字并排序的示例
2019/12/25 Python
linux 下python多线程递归复制文件夹及文件夹中的文件
2020/01/02 Python
Django实现将views.py中的数据传递到前端html页面,并展示
2020/03/16 Python
python 连续不等式语法糖实例
2020/04/15 Python
Python decimal模块使用方法详解
2020/06/08 Python
python绘制高斯曲线
2021/02/19 Python
解决python的空格和tab混淆而报错的问题
2021/02/26 Python
哈萨克斯坦移动和数字技术在线商店:SatelOnline.kz
2020/09/04 全球购物
经理任命书模板
2014/06/06 职场文书
因个人工作失误检讨书
2019/06/21 职场文书
使用Selenium实现微博爬虫(预登录、展开全文、翻页)
2021/04/13 Python