如何判断鼠标真正超出了一个div之外

Question

有一个大div，这个大div里有一些小的div，如何才能做到判断鼠标mouseout这个大div呢？就如同下面的父子关系：
<div id="father" style="width:500;height:500;left:100;top:100;position:absolute;">
  <div>0</div>
  <div>1</div>
  <div>2</div>
  <div>3</div>
   ...
  <div>4</div>
</div> 
问题在于如果鼠标在"father"内移动，如果遇到子div，也会触发mouseout，
所以，我希望当鼠标超出这个大的div之外才是真正的mouseout。这该如何判断呢，谁能给出兼容ff,ie,opera,crome,safri的代码？

Answer 1

<div id="father" style="width:500;height:500;left:100;top:100;position:absolute;" onMouseOut="alert('x')" onMouseOver="alert('y')">
  <div>0</div>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  ...
  <div>4</div>
</div>  

Answer 2

楼上的，如果鼠标遇到内部的div也会alert('x')的，不是真正的mouseout 大div啊

Answer 3

晕 大 div 包含 小 div  整块面积就是大 div啊

Answer 4

意思就是说只有超出边界之外才触发mouseout，内部不触发，明白么？

Answer 5

另外加要求，不需再内部的小div上做手脚

Answer 6

那 mouseout已经不属于 你说的 大 div了 在 大 div的 父级元素上添加事件把

Answer 7

不是的，就得在大的div上注册mouseout事件，只不过可能要判断toElement(ie)或relatedTarget(ff)，具体我还不太清楚怎么做的。

Answer 8

<div id="father" style="width:500px;height:500px;left:100px;top:100px;border:1px solid red;" onmouseout="test(this,event)">
  <div>0</div>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  ...
  <div>4</div>
</div> function test(obj, e)
{
if (e.currentTarget)
{
if (e.relatedTarget != obj)
{
if (obj != e.relatedTarget.parentNode)
{
alert("out");
}
   }
}
else
{
if (e.toElement != obj)
{
if (obj != e.toElement.parentNode)
{
alert("out");
}
}
}
}

Answer 9

我刚才在ff里ie里测试了，但还没有在其他的opera里等测试，一旦测试通过了就给分，别急，楼上

Answer 10

<div id="father" style="width:500px;height:500px;left:100px;top:100px;border:1px solid red;" onmouseout="test(this,event)">
  <div>0</div>
  <div>1<div>1.1111111></div></div>
  <div>2</div>
  <div>3</div>
  ...
  <div>4</div>
</div> 
我稍稍修改了一下
如果是这样，也有问题，aspwebchh能不能换一个思路呢？因为递归找父节点毕竟效率有问题！！！

Answer 11

参考一下这个 http://hi.baidu.com/fengchuyang/blog/item/7031c2ef80cb7530adafd501.html

Answer 12

<div id="father" style="width:500px;height:500px;left:100px;top:100px;border:1px solid red;" onmouseout="hideMsgBox(event)">
<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
...
<div>4</div>
<div>
<div>2</div>
<div>3</div>
...
<div>4</div>
</div>
</div> <script language="javascript">
if(typeof(HTMLElement)!="undefined")    //给firefox定义contains()方法，ie下不起作用
{   
      HTMLElement.prototype.contains=function(obj)   
      {   
          while(obj!=null&&typeof(obj.tagName)!="undefind")
  { //通过循环对比来判断是不是obj的父元素
   　　　　if(obj==this) return true;   
   　　　　obj=obj.parentNode;
   　　}   
           //alert("22");
 return false;   
      };   
}   function hideMsgBox(theEvent)
{ //theEvent用来传入事件，Firefox的方式
if (theEvent)
{
var browser=navigator.userAgent;   //取得浏览器属性
if (browser.indexOf("Firefox")>0)
{ //如果是Firefox
if (document.getElementById('father').contains(theEvent.relatedTarget))
{ //如果是子元素
return;   //结束函式
} 
} 
if (browser.indexOf("MSIE")>0)
{ //如果是IE
if (document.getElementById('father').contains(event.toElement))
{ //如果是子元素
return; //结束函式
}
}
}
    alert("out");      /*要执行的操作*/
}
</script>

Answer 13

function contain(parentNode, node) {
return !!(parentNode.compareDocumentPosition(node) & 16);
}
function enter(node, fun, arg) {
if(document.all) {
node.onmouseenter = function() {
fun(arg);
}
} else {
node.onmouseover = function(e) {
var _node = e.relatedTarget;
if(!contain(node, _node)) {
fun(arg);
}
}
}
}
function leave(node, fun, arg) {
if(document.all) {
node.onmouseleave = function() {
fun(arg);
}
} else {
node.onmouseout = function(e) {
var _node = e.relatedTarget;
if(!contain(node, _node)) {
fun(arg);
}
}
}
}

Answer 14

<style>
#father{
  width:500px;
  height:500px;
  left:100px;
  top:100px;
  position:absolute;
  border:1px solid red;
  margin:0px;
  padding:0px;
}
#son{
  width:400px;
  height:95px;
  position:reletive;
  border:1px solid blue;
}
</style>
<div id="father" onmouseout="restict(this,event)">
  <div id='son'>0</div>
  <div id='son'>1</div>
  <div id='son'>2</div>
  <div id='son'>3</div>
  <div id='son'>4</div>
</div>  
<script>
function restict(o,e){
  var x=0,y=0;
  var l=o.offsetLeft, t=o.offsetTop;
  var w=o.offsetWidth, h=o.offsetHeight;
  x=e.pageX||e.clientX, y=e.pageY||e.clientY;
  if((x>l && x<(l+w)) &&(y>t && y<(t+h))){
    if(e){e.stopPropagation();  return}
    else{ e.cancelBubble=true;  return}
  }
  alert("出界啦~")
}
</script>

Answer 15

哦，这里要改一下：
  if(e){e.stopPropagation();  return}
    else{ window.event.cancelBubble=true;  return}

Answer 16

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
div {
border-style:solid;
border-width:1px;
}</style>
<script type="text/javascript"> var isIE = /msie/i.test(navigator.userAgent) && !window.opera; function doMouseOut(e, father) {

var event = e || window.event;

var parent = isIE ? event.toElement : event.relatedTarget;

while ( parent && parent !== father ) {
parent = parent.parentNode;
} if ( parent !== father ) {
alert("1");
}

}</script>
</head>
<body>
<div id="father" style="width:500px;height:500px;left:100px;top:100px;position:absolute; background-color:#ffffff;" onmouseout="doMouseOut(event, this)" >
  <div>0</div>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>  </body>
</html>效率最高的全兼容方法