javascript onmouseout问题解决方案
方案一:
希望实现 当鼠标离开一个DIV的时候触发一个事件处理函数 于是用onmouseout 结果却发现它的触发是不是也太敏感了 原因现在也没有弄清楚 IE下好像是因为区分mouseout时的fromElement还是toElement ，IE 5.5以上的onmouseleave事件就比较好用 偏FF又不支持这个事件 只有自己想办法手工判断了。
<SCRIPT>
/***
* 参数e 是对象传递的触发事件 FF下想访问event对象必须传递event参数
* 参数o 是目标DIV对象
*/
function fun(e,o) {
/* FF 下判断鼠标是否离开DIV */
if(window.navigator.userAgent.indexOf("Firefox")>=1) {
var x = e.clientX + document.body.scrollLeft;
var y = e.clientY + document.body.scrollTop ;
var left = o.offsetLeft;
var top = o.offsetTop;
var w = o.offsetWidth;
var h = o.offsetHeight;
if(y < top || y > (h + top) || x > left + w || x<left ) {
alert("mouseout");
}
}
/* IE */
if(o.contains(event.toElement ) == false )
alert("mouseout");
}
</SCRIPT>
<DIV onmouseout=fun(event,this)>content</DIV>
需要注意 在取鼠标的值的时候 一定要加上滚动条已经拖动过的内容e.clientY + document.body.scrollTop 如果只是e.clientY得到是个错误的值 当然如果高宽都很小 是看不出来问题。 取一个对象的高和宽 也可以使用 clientHeight clientWidth 属性 以后遇到FF IE不兼容的时候要多看看FF的开发手册 http://developer.mozilla.org/en/docs/DOM:element.offsetLeft
方案二:(与一相似)
js的onmouseout有很奇怪的一个问题。例如<div >
<a href="#">test</a>
</div>
我们预期只有当鼠标从div中移开的时候才会触发onmouseout事件，可是，事实上，当我们移到div中的元素时，例如本例中的a标签时，就会触发onmousout事件。也就是说，移到对象的子对象上，也算onmouseout了。这往往会让我们预期的效果达不到。今天的工作就遇到了这个问题。在blueidea上搜了一下，找了解决办法。兼容IE和FF。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[url=http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd][color=#0000ff]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/color][/url]">
<html xmlns="[url=http://www.w3.org/1999/xhtml][color=#0000ff]http://www.w3.org/1999/xhtml[/color][/url]">
<head>
<meta http-equiv="Content-Type" c />
<title>阿当制作</title>
</head>
<body>
<script type="text/javascript">
function test(obj, e) {
if (e.currentTarget) {
if (e.relatedTarget != obj) {
if (obj != e.relatedTarget.parentNode) {
alert(1);
}
}
} else {
if (e.toElement != obj) {
if (obj != e.toElement.parentNode) {
alert(1);
}
}
}
}
</script>
<div style="width:100px;height:100px;border:1px #666 solid">
<span style="margin:5px;width:100%;height:100%;border:1px #ff0000 solid">faddsf</span>
</div>
</body>
</html>
今天发现JQ中关于这个问题,已经有了一个好的解决办法了.呵呵,jquery中定义了一种事件叫做"mouseleave",用这个事件做事件句柄的话,就可以解决这个问题了.越来越发现jquery是个好东西了.
方案三:
，jQuery V1.2.2推荐用bind("mouseleave",function(){})来代替以前的mouseover方法
用bind("mouseenter",function(){})来代替mouseout，同样也针对以前的hover方法，要看详细的说明点这个地址：http://docs.jquery.com/Release:jQuery_1.2.2
$(document).ready(function() {
$("#a1").bind("mouseleave", function(){
$('<div style="color:red;">out</div>')
.insertAfter($(this));
});
});
