- 浏览: 185319 次
- 性别:
- 来自: 四川
文章分类
- 全部博客 (131)
- CMS内容管理系统 (3)
- 支付宝实习之旅 (1)
- javaSE (5)
- myEclipse (1)
- DWR (0)
- strut2 (6)
- spring (4)
- hibernate (6)
- jquery (26)
- extjs (0)
- oracle (1)
- flex (10)
- ajax (0)
- jsp (3)
- java (4)
- JavaScript (4)
- css+div (5)
- Java面试 (3)
- java设计模式 (2)
- Think in java 笔记 (2)
- dom4j (1)
- JDBC (1)
- 经典方法学习 (1)
- windows常用操作 (1)
- maven (1)
- 75道经典逻辑题及答案 (1)
- mysql (3)
- jqueryDemo(插件) (3)
- php (14)
- ubuntu (6)
- 记事本 (1)
- php缓存 (1)
- 编程思想 (5)
- wamp (1)
- android (2)
- xml (1)
最新评论
-
coosummer:
推荐使用http://buttoncssgenerator.c ...
CSS按钮(研究) -
javaCrazy!:
监听一个keyup事件
jquery 监听input输入值事件 -
丶月满灬西楼彡:
问个问题:假如用户在Input中输入了“12345”,但后来又 ...
jquery 监听input输入值事件
解决HTML内部元素的Mouse事件干扰
话说有一个DIV元素,其内部有一个IMG元素和SPAN元素,不用理会这两个内部元素怎么布局,这不是我要讨论的重点。
为了实现一些特殊的效果,我需要利用TD的onmouseover和onmouseout事件,测试时就会发现如下的状况:
当鼠标移入DIV内部时,onmouseover事件被触发;接着再鼠标移动到DIV内部的IMG或者SPAN元素之上,我们肯定不会认为这时鼠标已经移到了DIV的外边,但奇怪的是onmouseout事件触发了,而且紧接着onmouseover事件也马上被触发了。
这可不是我想要的,那么怎么来“屏蔽”内部元素给外层元素带来的Javascript事件干扰呢?
这里列举两种方法:
一. setTimeout
因为在鼠标移动到内部元素之上而触发了外层元素的onmouseout事件后,外层元素的onmouseover也会马上触发,所以我们只需要把外层元素的onmouseout事件需要执行的动作延迟很短的一段时间来运行,然后在onmouseover事件中再执行clearTimeout方法,这样就可以避免内部元素引起的事件干扰。
具体的执行过程请看下图(纵向的虚线表示时间):
这是个很巧妙的的方法,因为当onmouseout触发后,实质性的方法并没有马上执行,而是要等待一小段时间。如果在这段时间里马上又触发了
onmouseover事件,那么基本上就可以肯定onmouseout事件的触发是因为内部元素的干扰了,所以在onmouseover事件中使用
clearTimeout来阻止延时的方法执行。
二.contains
在onmouseover时先进行如下判断,结果为true时再执行方法体:
if(!this.contains(event.fromElement)){MouseOverFunc()}
在onmouseout时先进行如下判断,结果为true时再执行方法体:
if(!this.contains(event.toElement)){MouseOutFunc()}
下面来解释一下上面两行代码的含义:
在IE中,所有的HTML元素都有一个contains方法,它的作用是判断当前元素内部是否包含指定的元素。我们利用这个方法来判断外层元素的事件是不是因为内部元素而被触发,如果内部元素导致了不需要的事件被触发,那我们就忽略这个事件。
event.fromElement指向触发onmouseover和onmouseout事件时鼠标离开的元素;event.toElement指向触发onmouseover和onmouseout事件时鼠标进入的元素。
那么上面两行代码的含义就分别是:
○
当触发onmouseover事件时,判断鼠标离开的元素是否是当前元素的内部元素,如果是,忽略此事件;
○
当触发onmouseout事件时,判断鼠标进入的元素是否是当前元素的内部元素,如果是,忽略此事件;
这样,内部元素就不会干扰外层元素的onmouseover和onmouseout事件了。
但问题又来了,非IE的浏览器并不支持contains函数,不过既然我们已经知道了contains函数的作用,就可以自行添加如下的代码来为非IE浏览器增加contains支持:
if(typeof(HTMLElement) != "undefined")
{
HTMLElement.prototype.contains = function(obj)
{
while(obj != null && typeof(obj.tagName) != "undefind")
{
if(obj == this)
Return true;
Obj =
obj.parentNode;
}
return false;
};
}
发表评论
-
jquery多函数执行
2014-01-07 15:33 9001、Array.prototype.slice.apply ... -
js关闭浏览器兼容性问题
2013-09-13 10:23 7271、ie,chrome下面代码都可以 window.ope ... -
jquery弹框插件(自定义easy-box)
2013-08-30 14:39 9681、插件代码easy-box.js $.ext ... -
50个jQuery代码段帮你成为更出色的JS开发者
2013-08-29 15:06 8690. 如何创建嵌套的过滤器: -
jquery验证插件进一步进行封装(easy-check)
2013-07-29 14:48 21661、easy-check.js,核心代码如下(要运行dem ... -
php echo jquery代码
2013-07-09 11:30 1461话不多少,直接贴上代码 echo "<sc ... -
用户图上传从本地加载图片,兼容ie6+,chrome,firefox
2012-11-24 17:26 784直接上代码 写道 <!DOCTYPE htm ... -
既可输入也可以选择的(input+select)兼容ie6+,chrome,firefox
2012-11-24 17:25 1165直接上代码 <html> <hea ... -
js或jquery导致ie6下,gif卡帧(不动)
2012-11-21 14:01 3064IE6下当JS触发GIF格式图片时,经常会出现GIF图片动几下 ... -
js解决IE遮罩层无法遮罩select
2012-11-07 15:23 8931、包含js (function(a){a.fn.bg ... -
div固定顶部或底部,IE下postion:fixed问题
2012-11-07 14:14 793像你所遇到的问题一样, IE6浏览器有太多的bug让制作 ... -
公告连续滚动js
2012-11-05 13:46 2107<!DOCTYPE html PUBLIC " ... -
jquery获取各种高度
2012-09-19 20:57 11511alert($(window).height()); ... -
jquery设置select选中,获取select选中的值 和文本
2012-09-11 17:03 1748选中select选项,根据value var pid ... -
jquery图片剪切(插件)
2012-09-09 12:28 1803我用过的jquery图片剪切插件有jcrop, imgsel ... -
jquery图片左右滚动,代码很简洁
2012-09-03 17:46 698<!DOCTYPE html PUBLIC &qu ... -
jquery 监听input输入值事件
2012-08-22 17:24 18410<html> <head&g ... -
jquery 可扩展滚动移动demo
2012-08-06 22:53 1018<!DOCTYPE html PUBLIC &qu ... -
jquery 设置select选中
2012-08-02 10:01 774jquery代码 $(document).rea ... -
jquery ajax之函数里面ajax请求,不能返回return 值
2012-07-31 21:45 2696代码 代码如下: fu ...
相关推荐
最近两天在温习onmouseover事件和onmouseout事件,其实里面有很多深奥的知识,接下来小编给大家带来了onmouseover事件和onmouseout事件全面了解,感兴趣的朋友一起看下
兼容ie和firefox的鼠标经过(onmouseover和onmouseout)实现--简短版
页面显示所有图片,当鼠标移到图片上显示该图片详细信息并且加样式
一个DIV层,当鼠标移进的时候会触发onmouseover,移出的时候会触发onmouseout...接着鼠标移动到’B'(路径’2′),此时’A’会触发onmouseout(先)和onmouseover(后)事件。 由此可见,如果HTML元素(‘A’层)内还有其他元
鼠标移上去显示别的东西,离开恢复原样;通过传递参数实现此功能
onmouseover IE3、N2 当鼠标移动到某对象范围的上方时触发此事件 onmousemove IE4、N4 鼠标移动时触发此事件 onmouseout IE4、N3 当鼠标离开某对象范围时触发此事件 onkeypress IE4、N4 当键盘上的某个键被按下...
c# 在webFrom上实现tabcontrol功能,可以实现tabcontrol中的所有功能,包括onmouseover事件和onclick事件,程序附有注释容易理解。
onMouseOver IE3|N2|O3 当鼠标移动到某对象范围的上方时触发的事件 onMouseMove IE4|N4|O 鼠标移动时触发的事件 onMouseOut IE4|N3|O3 当鼠标离开某对象范围时触发的事件 onKeyPress IE4|N4|O 当键盘上的某个键被按...
前段时间一直找这个的简短实现 网上也有很多方法 昨天发现了这种方法 感觉是用代码最少的 呵呵 ie下支持css的js ff等支持:hover 就这样了 觉得好的就顶起来 无标题文档 #b_g_date tr{ event:[removed]...
图片模糊化,支持FF/IE6以上,onMouseOver事件可以使图片模糊,onMouseout变清晰。
使用onmouseover和onmouseout事件实现不同的效果而且是使用js动态实现,本文有利于巩固你js与css方面的知识,感兴趣的你可以了解下哦,希望本文对你有所帮助
onMouseOver IE3|N2|O3 当鼠标移动到某对象范围的上方时触发的事件 onMouseMove IE4|N4|O 鼠标移动时触发的事件 onMouseOut IE4|N3|O3 当鼠标离开某对象范围时触发的事件 onKeyPress IE4|N4|O 当键盘上的某个键被按...
在ie6 下只有a 才支持:hover 伪类,其它标签都不支持,现在可以通过 csshover.htc 可以解决 ie6 的 hover 兼容问题。 它利用 javascript 脚本来给元素的的样式定义,如果检测到 hover 定义,就给元素设置 ...
在IE下解决问题很简单,用onMouseEnter、onMouseLeave来代替onMouseOver、onMouseOut就行了,他们的作用基本相同,但前者不会发生冒泡(如果用 jQuery的event事件,只要绑定mouseleave、mouseenter即可)。...
下面都是一些上面的事件触发的事先定义的代码。
一直想实现onmouseover和onmouseout应用于RadioButtonList或CheckBoxList控件上,今晚终于有时间实现它。此功能就是当鼠标经过时RadioButtonList或CheckBoxList每一个Item时,让Item有特效显示,离开时,恢复原样。...
Browser: IE4 | N4 | O 鼠标双击事件 ...Browser: IE4 | N4 | O 鼠标上的按钮被按下了 ...Browser: IE4 | N4 | O 鼠标按下后,松开时激发的事件 onMouseOver HTML: 2 | 3 | ...Browser: IE4 | N4 | O 鼠标移动时触发的事件
常用javaScript事件归纳。 常用事件: 1.onclick 鼠标单击事件 通常在下列基本对象中产生: button(按钮对象) checkbox(复选框)或(检查列表框) radio (单选钮) reset buttons(重要按钮) submit ...