扩展Jquery插件处理mouseover时内部有子元素时发生样式闪烁

解决思路如下：
首先，判断事件的当前节点，也就是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;
}

赞 (0)

相关推荐

  • jQuery autocomplate 自扩展插件、自动完成示例代码

    复制代码 代码如下: 不过做了浏览器方面的兼容,经测试兼容IE6+.Firefox3.5+ 首先看看autocomplate.js: ;(function ($) { var index = -1; var timeId; var cssOptions = { "border": "1px solid black", "background-color": "white", "position": &quo

  • jQuery插件formValidator自定义函数扩展功能实例详解

    本文实例讲述了jQuery插件formValidator自定义函数扩展功能的方法.分享给大家供大家参考,具体如下: jQuery formValidator表单验证插件是什么?感兴趣的读者可参考<jQuery formValidator表单验证插件>以及本站其他相关文档 此处省略若干文字. 实际项目中的表单应用是多种多样的,随之而来的验证也是多变的,但Jquery formValidator为我们提供了自定义函数接口,个人认为是其最主要的强大之处.废话不多说,直接实例. 例一:座机和手机,至少

  • jQuery插件扩展测试实例

    本文实例讲述了jQuery插件扩展测试方法.分享给大家供大家参考,具体如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-

  • JQuery扩展插件Validate 5添加自定义验证方法

    JQuery扩展插件Validate 5添加自定义验证方法

    示例如下: 复制代码 代码如下: <script type="text/javascript"> jQuery.validator.addMethod("regex", //addMethod第1个参数:方法名称 function(value, element, params) { //addMethod第2个参数:验证方法,参数(被验证元素的值,被验证元素,参数) var exp = new RegExp(params); //实例化正则对象,参数为传

  • jquery事件机制扩展插件 jquery鼠标右键事件

    因为最近技术长进缓慢,也没高手带,只能靠自己了,所以想仿个WEBQQ来锻炼下自己.做之前最好先把必要的东西准备好.jquery其实本身的事件机制就很完善了,包括了单击,双击,鼠标移入,鼠标移出等.但是却少了一个做事件.就是鼠标右击事件.当然大家也是直接用侦听鼠标按下事件,然后通过if来判断执行相应的函数.造成鼠标右击事件的效果. 但是这不是我想要的,我想要的似乎这个事件可以跟其它事件比如单击事件一样.可以被方便的使用,而不需要每次都去判断.这里通过编写jquery插件的形式扩展,让这个方法可以直

  • jQuery插件kinMaxShow扩展效果用法实例

    本文实例讲述了jQuery插件kinMaxShow扩展效果用法.分享给大家供大家参考.具体分析如下: 支付宝首页的焦点图就是用的kinMaxShow 扩展效果(前段时间支付宝使用的,不知道现在还是不是这种,另外支付宝的这个焦点图动画效果是分浏览器的,IE8及以下浏览器无动画纯静态,只是在谷歌.火狐等现代浏览器才会出现动画.) 这只是kinMaxShow扩展的一个小例子,更多效果你可以自己发挥. 代码如下: javascript 代码: <script src="js/jquery-1.10

  • JQuery扩展插件Validate—6 radio、checkbox、select的验证

    JQuery扩展插件Validate—6 radio、checkbox、select的验证

    效果如下所示: 解决这个问题的办法是将错误信息指定到一个特定的位置,validate()方法的参数中可以进行自定义,示例代码如下: 复制代码 代码如下: <script type="text/javascript"> jQuery.validator.addMethod("regex", //addMethod第1个参数:方法名称 function(value, element, params) { //addMethod第2个参数:验证方法, //验证

  • boxy基于jquery的弹出层对话框插件扩展应用 弹出层选择器

    boxy基于jquery的弹出层对话框插件扩展应用 弹出层选择器

    我们使用热门的jquery进行设计,同时我们选择效果比较优秀的boxy弹出插件进行扩展(关于boxy的相关资料,请参照张鑫旭博客http://www.zhangxinxu.com/wordpress/?p=318).下面介绍boxy作为选择器框架的应用. 对于选择器,相信用过招聘网站的人都不会陌生(就是那个点击就弹出的,选择行业.职位和地区的东西),选择器难点就在于样式调试,主要针对的是IE6.这里介绍行业.职位和地区选择器,下载的Demo包含这三个选择器. 行业选择器:无关联,调用语句为Box

  • JQuery扩展插件Validate 2通过参数设置验证规则

    JQuery扩展插件Validate 2通过参数设置验证规则

    代码如下: 复制代码 代码如下: <script type="text/javascript"> $(function() { $("#signupForm").validate( //在上例中新增的部分 { rules: { txtPassword1: "required", //密码1必填 txtPassword2: { //密码2的描述多于1项使用对象类型 required: true, //必填,这里可以是一个匿名方法 equ

  • JQuery扩展插件Validate—4设置错误提示的样式

    JQuery扩展插件Validate—4设置错误提示的样式

    我们先来使用firebug查看在前面的示例中JS产生的html错误提示: 从图中我们发现错误信息是被放在了一个label标签中,且有一个类样式error,只要为signupform下面的label标签中的error定css样式,应该就可以修改显示结果了,添加的css代码如下: 复制代码 代码如下: <style type="text/css"> * { font-size: 14px; } #signupForm label.error { color:Red; font-

  • JQuery扩展插件Validate 3通过参数设置错误信息

    JQuery扩展插件Validate 3通过参数设置错误信息

    最终显示在页面上的错误分为两种:第一种是默认错误信息,该信息已经被定义在插件中了,可以手动修改. 第二种是通过参数指定的错误信息,如果没有指定则会使用默认的错误信息.将上个示例的js修改如下: 复制代码 代码如下: <script type="text/javascript"> $(function() { $("#signupForm").validate( //在上例中新增的部分 { rules: { txtPassword1: "requ

  • JQuery扩展插件Validate 1 基本使用方法并打包下载

    JQuery扩展插件Validate 1 基本使用方法并打包下载

    分别是: <script src="../Contents/JS/jquery-1.5.js" type="text/javascript"></script> <script src="../Contents/JS/jquery.validate.min.js" type="text/javascript"></script> 1.基本使用方法,通过样式设置验证规则 复制代码

随机推荐