扩展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 相关文章推荐
document 和 document.all 分别什么时候用
Jun 22 Javascript
JavaScript中几种常见排序算法小结
Feb 22 Javascript
如何阻止复制剪切和粘贴事件为了表单内容的安全
May 23 Javascript
JavaScript 动态加载脚本和样式的方法
Apr 13 Javascript
JavaScript实现form表单的多文件上传
Mar 27 Javascript
基于JS实现带动画效果的流程进度条
Jun 01 Javascript
微信小程序仿RadioGroup改变样式的处理方案
Jul 13 Javascript
微信小程序首页的分类功能和搜索功能的实现思路及代码详解
Sep 11 Javascript
React组件对子组件children进行加强的方法
Jun 23 Javascript
layui点击弹框页面 表单请求的方法
Sep 21 Javascript
webpack安装配置与常见使用过程详解(结合vue)
Jun 01 Javascript
JS实现鼠标移动拖尾
Dec 27 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 数组遍历的差异(array_diff 的实现)
2008/03/23 PHP
PHP5.3.1 不再支持ISAPI
2010/01/08 PHP
php 模拟GMAIL,HOTMAIL(MSN),YAHOO,163,126邮箱登录的详细介绍
2013/06/18 PHP
php实现构建排除当前元素的乘积数组方法
2018/10/06 PHP
PHP使用PDO实现mysql防注入功能详解
2019/12/20 PHP
document.all与WEB标准
2020/05/13 Javascript
MooTools 1.2中的Drag.Move来实现拖放
2009/09/15 Javascript
js 字符串转化成数字的代码
2011/06/29 Javascript
js选取多个或单个元素的实现代码(用class)
2012/08/22 Javascript
SwfUpload在IE10上不出现上传按钮的解决方法
2013/06/25 Javascript
JavaScript中的console.dir()函数介绍
2014/12/29 Javascript
javascript中createElement的两种创建方式
2015/05/14 Javascript
Bootstrap安装环境配置教程分享
2016/05/27 Javascript
Webpack打包css后z-index被重新计算的解决方法
2017/06/18 Javascript
JS 学习总结之正则表达式的懒惰性和贪婪性
2017/07/03 Javascript
jQuery dateRangePicker插件使用方法详解
2017/07/28 jQuery
微信开发之微信jssdk录音功能开发示例
2018/10/22 Javascript
详解nuxt路由鉴权(express模板)
2018/11/21 Javascript
详解vue中v-bind:style效果的自定义指令
2020/01/21 Javascript
JavaScript中的this/call/apply/bind的使用及区别
2020/03/06 Javascript
python利用hook技术破解https的实例代码
2013/03/25 Python
python批量添加zabbix Screens的两个脚本分享
2017/01/16 Python
python并发编程之线程实例解析
2017/12/27 Python
Django添加feeds功能的示例
2018/08/07 Python
Python实现点阵字体读取与转换的方法
2019/01/29 Python
Pandas之ReIndex重新索引的实现
2019/06/25 Python
python对csv文件追加写入列的方法
2019/08/01 Python
Python 处理日期时间的Arrow库使用
2020/08/18 Python
结构工程研究生求职信
2013/10/13 职场文书
国际经济贸易专业推荐信
2013/11/06 职场文书
总经理助理的职责
2014/03/14 职场文书
我的中国梦演讲稿500字
2014/08/19 职场文书
银行反洗钱宣传活动总结
2015/05/08 职场文书
新教师2015年度工作总结
2015/07/22 职场文书
PL350与SW11的比较
2021/04/22 无线电
vue实现同时设置多个倒计时
2021/05/20 Vue.js