在mouseout与mouseover的冒泡问题上,相信有很多朋友都遇到过。今天这里就总结一下关于mouseover和mouseout冒泡问题的解决方案:
首先,看下event.relatedTarget的用法。
relatedTarget 事件属性返回与事件的目标节点相关的节点。
relatedTarget不支持IE。
对于 mouseover 事件来说,该属性是鼠标指针移到目标节点上时所离开的那个节点。
对于 mouseout 事件来说,该属性是离开目标时,鼠标指针进入的节点。
对于其他类型的事件来说,这个属性没有用。
html代码:
<div id='but_temp'><a href='#'>这里是文字</a>
<div>第二方收复失地还 <br>sdfsjdlfsdjlfksdjlfksjdflk
<br>
<div>第三层第三层第三层第三层第三层第三层<br>
第三层第三层第三层第三层第三层第三层第三层</div>
<br>
</div>
</div>
js代码:
<script type="text/javascript" >
var d1 = document.getElementById('but_temp');
d1.onmouseover = mouseover_x ;
d1.onmouseout = mouseout_x ;
function mouseover_x ( ae ){
var e = window.event || ae ;
var s = e.fromElement || e.relatedTarget ;
if( document.all ){
if( !(s == this || this.contains(s)) ){
alert("IE: 你 in 了 !");
}
}else{
var res= this.compareDocumentPosition(s) ;
if( !(s == this || res == 20 || res == 0 ) ){
alert("FF: 你 in 了 !");
}
}
}
function mouseout_x( ae ){
var e = window.event || ae;
var s = e.toElement || e.relatedTarget;
//var temp = document.getElementById('but_temp');
if(document.all){
if( !this.contains(s) ){
alert('IE: 你 out 了');
}
}else{
var res= this.compareDocumentPosition(s) ;
if( ! ( res == 20 || res == 0) ){
alert('FF: 你 out 了');
}
}
}
</script>
分享到:
相关推荐
问题是这样的:一个div元素要触发onmouseout事件,同时这个div内部还有子元素,于是当鼠标移动到该div的子元素上时,onmouseout事件也被触发了。在要做浮动层效果的时候会经常遇到这个问题。 解决方法一: 使用...
本文为大家介绍下js阻止子元素响应父元素的onmouseout事件,具体实现如下,感兴趣的朋友可以参考下
也就是说,移到对象的子对象上,也算onmouseout了。但这往往会达不到我们想要的预期效果。这是由于javascript自身的冒泡特性导致的(即在子元素上触发了事件,并冒泡到了父元素-堆栈后进先出算法)。今天在网上搜了...
兼容ie和firefox的鼠标经过(onmouseover和onmouseout)实现--简短版
javascript onmouseout 解决办法.docx
onmouseout 发现它的触发太敏感,当经过层内文字链时,即触发onmousetout事件,功能不能正常显示,经过一番搜索,整理出来,供大家参考。 1、 代码如下: [removed] function test(obj, e) { if (e.currentTarget) { ...
但随之烦恼也就来了:onmouseover并不会只在移进时才触发,onmouseout也不会只在移出时才触发!鼠标在DIV里面移动时也会可能触发onmouseover或onmouseout。 在上图中,对于’A’来说:当鼠标进入’A'(路径’1′)时...
这两天接触了onmouseover事件和onmouseout事件,一直以为它们只是简单的分别实现鼠标指针移动到元素上时触发事件和在鼠标指针移出指定的对象时触发事件,但是突然发现这些只是对它们简单的描述,下面让我们一起看看...
js下关于onmouseout、事件冒泡的问题经验小结.docx
前段时间一直找这个的简短实现 网上也有很多方法 昨天发现了这种方法 感觉是用代码最少的 呵呵 ie下支持css的js ff等支持:hover 就这样了 觉得好的就顶起来 无标题文档 #b_g_date tr{ event:[removed]...
onmouseout IE4、N3 当鼠标离开某对象范围时触发此事件 onkeypress IE4、N4 当键盘上的某个键被按下并且释放时触发此事件. onkeydown IE4、N4 当键盘上某个按键被按下时触发此事件 onkeyup IE4、N4 当键盘上某个...
在ie6 下只有a 才支持:hover 伪类,其它标签都不支持,现在可以通过 csshover.htc 可以解决 ie6 的 hover 兼容问题。 它利用 javascript 脚本来给元素的的样式定义,如果检测到 hover 定义,就给元素设置 ...
onmouseout 当用户将鼠标指针移出对象边界时触发。 onmouseover 当用户将鼠标指针移动到对象内时触发。 onmouseup 当用户在鼠标位于对象之上时释放鼠标按钮时触发。 onmousewheel 当鼠标滚轮按钮旋转时触发。 ...
onmouseout 鼠标从某个对象上移走时触发 oncontextmenu 用户右键时触发 复制粘贴行为检测 函数 条件 oncopy 用户复制时触发 oncut 用户剪切时触发 onpaste 用户粘贴时触发 对用户行为的检测有...
onMouseOut HTML: 当鼠标离开某对象范围时触发的事件 onKeyPress HTML: 当键盘上的某个键被按下并且释放时触发的事件.[注意:页面内必须有被聚焦的对象] onKeyDown HTML: 当键盘上某个按键被按下时触发的事件[注意:...
onMouseOut IE4|N3|O3 当鼠标离开某对象范围时触发的事件 onKeyPress IE4|N4|O 当键盘上的某个键被按下并且释放时触发的事件.[注意:页面内必须有被聚焦的对象] onKeyDown IE4|N4|O 当键盘上某个按键被按下时触发的...