扩展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 相关文章推荐
js 静态动态成员 and 信息的封装和隐藏
May 29 Javascript
jquery.ui.draggable中文文档(原文翻译)
Nov 15 Javascript
元素绑定click点击事件方法
Jun 08 Javascript
利用jQuery中的ajax分页实现代码
Feb 25 Javascript
详解XMLHttpRequest(二)响应属性、二进制数据、监测上传下载进度
Sep 14 Javascript
JavaScript将base64图片转换成formData并通过AJAX提交的实现方法
Oct 24 Javascript
深入理解react-router@4.0 使用和源码解析
May 23 Javascript
js微信分享实现代码
Oct 11 Javascript
Vue computed 计算属性代码实例
Apr 22 Javascript
JS使用setInterval计时器实现挑战10秒
Nov 08 Javascript
vue的webcamjs集成方式
Nov 16 Javascript
JS前端轻量fabric.js系列物体基类
Aug 05 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生成带有雪花背景的验证码
2008/09/28 PHP
对于PHP 5.4 你必须要知道的
2013/08/07 PHP
PHP递归遍历指定目录的文件并统计文件数量的方法
2015/03/24 PHP
thinkphp autoload 命名空间自定义 namespace
2015/07/17 PHP
PHP共享内存用法实例分析
2016/02/12 PHP
AJAX PHP无刷新form表单提交的简单实现(推荐)
2016/09/09 PHP
PHP进阶学习之命名空间基本用法分析
2019/06/18 PHP
PhpStorm连接服务器并实现自动上传功能
2020/12/09 PHP
node.js中的buffer.copy方法使用说明
2014/12/14 Javascript
ECMAScript 5严格模式(Strict Mode)介绍
2015/03/02 Javascript
javascript实现3D切换焦点图
2015/10/16 Javascript
js实现仿qq消息的弹出窗效果
2016/01/06 Javascript
Javascript基础之数组的使用
2016/05/13 Javascript
基于MVC5和Bootstrap的jQuery TreeView树形控件(二)之数据支持json字符串、list集合
2016/08/11 Javascript
基于cropper.js封装vue实现在线图片裁剪组件功能
2018/03/01 Javascript
nodejs中密码加密处理操作详解
2018/03/20 NodeJs
详解vue的双向绑定原理及实现
2019/05/05 Javascript
vue eslint简要配置教程详解
2019/07/26 Javascript
python执行子进程实现进程间通信的方法
2015/06/02 Python
python实现人人自动回复、抢沙发功能
2018/06/08 Python
Django中的forms组件实例详解
2018/11/08 Python
对Python捕获控制台输出流的方法详解
2019/01/07 Python
20行python代码的入门级小游戏的详解
2019/05/05 Python
下载官网python并安装的步骤详解
2019/10/12 Python
python 协程中的迭代器,生成器原理及应用实例详解
2019/10/28 Python
TensorFlow索引与切片的实现方法
2019/11/20 Python
Pycharm 2020年最新激活码(亲测有效)
2020/09/18 Python
人力资源作业细则
2014/03/03 职场文书
社区食品安全实施方案
2014/03/28 职场文书
小学英语教师先进事迹
2014/05/28 职场文书
党员十八大心得体会
2014/09/12 职场文书
工作证明格式及范本
2014/09/12 职场文书
2016年少先队活动总结
2016/04/06 职场文书
解决jupyter notebook启动后没有token的坑
2021/04/24 Python
Unicode中的CJK(中日韩统一表意文字)字符小结
2021/12/06 HTML / CSS
GO语言异常处理分析 err接口及defer延迟
2022/04/14 Golang