扩展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 相关文章推荐
点击广告后才能获得下载地址
Oct 26 Javascript
Javascript 原型和继承(Prototypes and Inheritance)
Apr 01 Javascript
Javascript 面向对象 继承
May 13 Javascript
javascript中加号(+)操作符的一些神奇作用
Jun 06 Javascript
javascript定时器完整实例
Feb 10 Javascript
js运动动画的八个知识点
Mar 12 Javascript
jquery中键盘事件小结
Feb 24 Javascript
jQuery动态移除与增加onclick属性的方法详解
Jun 07 jQuery
微信小程序中进行地图导航功能的实现方法
Jun 29 Javascript
解决Vue+Element ui开发中碰到的IE问题
Sep 03 Javascript
vue.js多页面开发环境搭建过程
Apr 24 Javascript
详解基于Wepy开发小程序插件(推荐)
Aug 01 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 中的批处理的实现
2007/06/14 PHP
Cakephp 执行主要流程
2010/03/24 PHP
深入浅出php socket编程
2015/05/13 PHP
PHP实现可添加水印与生成缩略图的图片处理工具类
2018/01/16 PHP
LaravelS通过Swoole加速Laravel/Lumen详解
2018/03/02 PHP
php查看一个变量的占用内存的实例代码
2020/03/29 PHP
Javascript 面向对象 继承
2010/05/13 Javascript
基于jquery的监控数据是否发生改变
2011/04/11 Javascript
Jquery实现Div上下移动示例
2014/04/23 Javascript
jQuery打字效果实现方法(附demo源码下载)
2015/12/18 Javascript
JS全局变量和局部变量最新解析
2016/06/24 Javascript
Bootstrap页面标题Page Header的实现方法
2017/03/22 Javascript
webpack踩坑之路图片的路径与打包
2017/09/05 Javascript
vue动态绑定组件子父组件多表单验证功能的实现代码
2018/05/14 Javascript
vue-cli 使用vue-bus来全局控制的实例讲解
2018/09/15 Javascript
使用koa-log4管理nodeJs日志笔记的使用方法
2018/11/30 NodeJs
NProgress显示顶部进度条效果及使用详解
2019/09/21 Javascript
Python使用scrapy抓取网站sitemap信息的方法
2015/04/08 Python
编写Python的web框架中的Model的教程
2015/04/29 Python
Python 查找字符在字符串中的位置实例
2018/05/02 Python
Python 判断奇数偶数的方法
2018/12/20 Python
Django实现文件上传下载功能
2019/10/06 Python
python调用matplotlib模块绘制柱状图
2019/10/18 Python
Python使用matplotlib绘制Logistic曲线操作示例
2019/11/28 Python
TensorFlow获取加载模型中的全部张量名称代码
2020/02/11 Python
Python使用graphviz画流程图过程解析
2020/03/31 Python
QML用PathView实现轮播图
2020/06/03 Python
html5使用Canvas绘图的使用方法
2017/11/21 HTML / CSS
Argos官网:英国家喻户晓的百货零售连锁商
2017/04/03 全球购物
英国最好的温室之家:Greenhouses Direct
2019/07/13 全球购物
在C++ 程序中调用被C 编译器编译后的函数,为什么要加extern "C"
2014/08/09 面试题
团队经理竞聘书
2014/03/31 职场文书
安全演讲稿大全
2014/05/09 职场文书
人事专员岗位职责说明书
2014/07/30 职场文书
放牛班的春天观后感
2015/06/01 职场文书
世界无敌的ICOM IC-R9500宽频接收机
2022/03/25 无线电