div嵌套div，onmouseout事件怎的判断鼠标离开最外面的div

2013-08-11

div嵌套div，onmouseout事件怎样判断鼠标离开最外面的div具体代码如下：!DOCTYPE HTML PUBLIC -//W3C//DTD

div嵌套div，onmouseout事件怎样判断鼠标离开最外面的div
具体代码如下：


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
<script src="jquery-1.6.1.js"></script>
  <script>
function showTab1(){
alert("鼠标进入 F1");
}

function disTab1(){
alert("鼠标离开   F1");
}

function showTab2(){
alert("鼠标进入 F2");
}

function disTab2(){
alert("鼠标离开   F2");
}

function showTab3(){
alert("鼠标进入 F3");
}

function disTab3(){
alert("鼠标离开   F3");
}

  </script>
 </head>
 <body>
  <br/>
  <div id="f1" style="width:400px; height:400px; background:green;" onmouseover="showTab1()" onmouseout="disTab1()">
 <div id="f2" style="width:200px; height:200px; background:blue;" onmouseover="showTab2()" onmouseout="disTab2()">
 <div id="f3" style="width:100px; height:100px; background:red;" onmouseover="showTab3()" onmouseout="disTab3()">
 </div>
</div>
  </div>
<br/>
 
 </body>
</html>

RT：怎样判断鼠标离开了最外面的div f1

[解决办法]
获取最外层的div的所有子元素(包括<a/>、<div/>、<p/>等等)

监听document的onmouseover事件

判断触发事件的元素是否div或div的子元素
[解决办法]


var getAllChildNodes = function(obj){//得到某元素的子元素(包括子元素的子元素)
var nodes = obj.childNodes;
var arr = []; 
 
var len = nodes.length;
for(var i=0;i<len;i++){
if(nodes[i].tagName!=undefined){
arr.push(nodes[i]);
arr = arr.concat(getAllChildNodes(nodes[i]));
}
}
return arr;
};
var getChildNodes = function(obj){//得到某元素的子元素(不含子元素的子元素)
var nodes = obj.childNodes;
var arr = [];
for(var i=0;i<nodes.length;i++){
if(nodes[i].tagName!=undefined){
arr.push(nodes[i]);
}
}
return arr;
};
var inArray = function(arr,obj){//判断制定数组中是否存在制定元素
for(var i=0;i<arr.length;i++){
if(arr[i]==obj) return true;
}
return false;
};
document.onmouseover=function(event){
//事件监听最好用addEventListener/attachEvent，不过因为需要写兼容代码，这里就不用它们了
if(document.all)event.target=event.srcElement;
var allNodes=getAllChildNodes(document.getElementById("你的DIV的ID"));
if(!inArray(allNodes,event.target)){//这里的条件根据你的需求自己改改
//onmouseover不在指定DIV的子元素上
}
}

[解决办法]


<html>
 <head>
  <title> New Document </title>
   <script>
function xx(){
//alert("鼠标进入："+window.event.srcElement.id);
}
function yy(){
var src = window.event.srcElement;
if(src.id == "f1"){
alert("鼠标离开："+src.id);
}
}
  </script>
 </head>
 <body>
  <br/>
  <div id="f1" style="width:400px; height:400px; background:green;" onmouseover="xx()" onmouseout="yy()">
         <div id="f2" style="width:200px; height:200px; background:blue;" onmouseover="xx()" onmouseout="yy()">
             <div id="f3" style="width:100px; height:100px; background:red;" onmouseover="xx()" onmouseout="yy()">
             </div>
        </div>
  </div>
<br/>
 
 </body>
</html>

[解决办法]
冒泡了是吧……


<div id="f1" style="width:400px; height:400px; background:green;">
         <div id="f2" style="width:200px; height:200px; background:blue;"> 
 
             <div id="f3" style="width:100px; height:100px; background:red;">
             </div>
        </div>
  </div>


function test_out(id){
var _this = this, obj = document.getElementById(id);
this.in_dom = function(m,n){
if (m==n) return true;
else if (!m.parentNode) return false;
else if (m.parentNode==n) return true;
else return _this.in_dom(m.parentNode,n);
};
obj.onmouseout = function(event){
var e = arguments[0]
[解决办法]
window.event;
var x = e.relatedTarget
[解决办法]
e.toElement; // 鼠标滑出的目标元素
if (!_this.in_dom(x,obj)){
alert("移出来了");
}
}
}

用的时候
var xx = new test_out("f1");

方法是，触发onmouseout的时候，判断鼠标当前位置的元素是不是它的子元素，如果是的话不触发。
如果不是它的子元素，那就是移出来了。

热点排行

JavaScript

div嵌套div，onmouseout事件怎的判断鼠标离开最外面的div