扩展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清空file文件域的解决方案
Apr 12 Javascript
JQuery页面的表格数据的增加与分页的实现
Dec 10 Javascript
开发中可能会用到的jQuery小技巧
Mar 07 Javascript
jQuery知识点整理
Jan 30 Javascript
js实现鼠标移到链接文字弹出一个提示层的方法
May 11 Javascript
javascript实现table选中的行以指定颜色高亮显示的方法
May 13 Javascript
jQuery满屏焦点图左右滚动特效代码分享
Sep 07 Javascript
JavaScript仿商城实现图片广告轮播实例代码
Feb 06 Javascript
轻松实现js选项卡切换效果
Sep 24 Javascript
AngularJS实现controller控制器间共享数据的方法示例
Oct 30 Javascript
微信小程序中吸底按钮适配iPhone X方案
Nov 29 Javascript
详解Vue Elementui中的Tag与页面其它元素相互交互的两三事
Sep 25 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 memcache扩展的三种安装方法
2009/04/26 PHP
php缓冲 output_buffering的使用详解
2013/06/13 PHP
PHP 中常量的知识整理
2017/04/14 PHP
浅谈PHP array_search 和 in_array 函数效率问题
2019/10/15 PHP
用JavaScript将从数据库中读取出来的日期型格式化为想要的类型。
2009/08/15 Javascript
jquery ajax提交表单数据的两种实现方法
2010/04/29 Javascript
详谈 Jquery Ajax异步处理Json数据.
2011/09/09 Javascript
js页面跳转的问题(跳转到父页面、最外层页面、本页面)
2013/08/14 Javascript
js出生日期 年月日级联菜单示例代码
2014/01/10 Javascript
Javascript调用函数方法的几种方式介绍
2015/03/20 Javascript
解决JS组件bootstrap table分页实现过程中遇到的问题
2016/04/21 Javascript
jQuery基本过滤选择器用法示例
2016/09/09 Javascript
从零学习node.js之文件操作(三)
2017/02/21 Javascript
详解Vue-基本标签和自定义控件
2017/03/24 Javascript
jQuery返回定位插件详解
2017/05/15 jQuery
Vue+Element使用富文本编辑器的示例代码
2017/08/14 Javascript
JS实现的简单表单验证功能示例
2017/10/13 Javascript
Vue 使用 Mint UI 实现左滑删除效果CellSwipe
2018/04/27 Javascript
Angular6 Filter实现页面搜索的示例代码
2018/12/02 Javascript
深入理解vue中的slot与slot-scope
2019/04/22 Javascript
js实现简单扫雷
2020/11/27 Javascript
JavaScript实现缓动动画
2020/11/25 Javascript
python修改字典键(key)的方法
2019/08/05 Python
windows环境中利用celery实现简单任务队列过程解析
2019/11/29 Python
Joules美国官网:出色的英国风格
2017/10/30 全球购物
介绍一下linux文件系统分配策略
2012/11/17 面试题
工程预算与管理应届生求职信
2013/10/06 职场文书
英文简历中的自我评价
2013/10/06 职场文书
商务专员岗位职责
2013/11/23 职场文书
大学生入党思想汇报
2014/01/01 职场文书
物业管理计划书
2014/01/10 职场文书
学校标语大全
2014/06/19 职场文书
教师节感恩老师演讲稿
2014/08/28 职场文书
物业客服专员岗位职责
2015/04/07 职场文书
演讲开场白台词大全
2015/05/29 职场文书
Java数据结构之堆(优先队列)
2022/05/20 Java/Android