扩展Jquery插件处理mouseover时内部有子元素时发生样式闪烁
更新时间：2011年12月08日 23:07:22 作者：
在我们对一个dom添加mouseover和mouseout时，也就是jquery的hover事件，如果该dom有子元素，鼠标移到子元素时会触发mouseout事件，但往往实际情况我们希望在子元素上不触发out事件
解决思路如下：
首先，判断事件的当前节点，也就是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;
}
首先，判断事件的当前节点，也就是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;
}
您可能感兴趣的文章:
- jQuery插件formValidator自定义函数扩展功能实例详解
- jQuery插件kinMaxShow扩展效果用法实例
- jquery事件机制扩展插件 jquery鼠标右键事件
- JQuery扩展插件Validate—6 radio、checkbox、select的验证
- JQuery扩展插件Validate—4设置错误提示的样式
- JQuery扩展插件Validate 3通过参数设置错误信息
- JQuery扩展插件Validate 2通过参数设置验证规则
- JQuery扩展插件Validate 1 基本使用方法并打包下载
- JQuery扩展插件Validate 5添加自定义验证方法
- jQuery autocomplate 自扩展插件、自动完成示例代码
- boxy基于jquery的弹出层对话框插件扩展应用 弹出层选择器
- jQuery插件扩展测试实例
相关文章
一步步教大家编写酷炫的导航栏，js+css实现黑色经典导航栏，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-03-03
jquery multiSelect 多选下拉框实现挨骂2010-07-07
需要jQuery -detach 后的dom 结构或某个值，如何获取到呢？一直困惑着我们，不过本文将为大家解开疑惑，感兴趣的朋友可以了解下，或许本文对你有所帮助2013-02-02
最近在学习JQuery，其实也不叫学习，很久以前就学过，只是有一段时间没用，有些生疏了，于是就做几个小例子来练习练习，为了方便以后查找就将这些小示例记录下来2012-09-09
jQuery插件bgStretcher.js实现全屏背景特效
可以自动动态更换网页背景图片的jQuery插件bgstretcher.js，sharejs.com推荐的这个插件，可以自定义多种方式让网页背景自动切换，效果流畅，非常难得，调用代码也非常简单。2015-06-06
本篇文章介绍了，在jquery中.add()的使用分析。需要的朋友参考下2013-04-04
如果使用一个变量替换，使用工具压缩时将会进一步减少文件的大小2012-05-05
这篇文章主要介绍了jQuery获取table下某一行某一列的值实现代码的相关资料,需要的朋友可以参考下2017-04-04
这篇文章主要为大家详细介绍了高效Web开发的10个jQuery代码片段，具有一定的实用性和参考价值，感兴趣的小伙伴们可以参考一下2016-07-07
解决jQuery uploadify在非IE核心浏览器下无法上传
之前上传了一个通过Flash实现多文件上传，但是在IE正常运行，FireFox 不能正常上传。经过反复研究学习，之所以firefox和360浏览器无法正常运行，是因为FireFox、chrome、360浏览器等支持HTML5的浏览器不会再文件上传时自动带入session信息和cookie，不共享session。2015-08-08
最新评论