onmouseout问题
js的onmouseout有很奇怪的一个问题。例如
<div onmouseout="alert(123)">
<a href="#">test</a>
</div>
我们预期只有当鼠标从div中移开的时候才会触发onmouseout事件，可是，事实上，当我们移到div中的元素时，例如本例中的a标签时，就会触发onmousout事件。也就是说，移到对象的子对象上，也算onmouseout了。这往往会让我们预期的效果达不到。今天的工作就遇到了这个问题。在blueidea上搜了一下，找了解决办法。兼容IE和FF。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<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 onmouseout="test(this, event)" 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是个好东西了.
