<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>mouseerter与mouseover区别(IE下测试)</title>
</head>
<body>
<div id="result" style="position:absolute;right:100px;top:5px;width:250px;height:400px;border:2px solid gray;overflow:auto;">
</div>
<h3>1,鼠标在div[id=parent1]内部移动时会触发mouseover事件</h3>
<div id="parent1" style="width:400px;border:1px solid gray;padding:5px;">
<div id="child11" style="width:100px;height:100px;background:gold;float:left;">Child11</div>
<div id="child12" style="width:100px;height:100px;background:gold;float:right;">Child12</div>
<div style="clear:both;"></div>
</div>
<br/>
<h3>2,鼠标在div[id=parent2]内部移动时不会触发mouseenter事件</h3>
<div id="parent2" style="width:400px;border:1px solid gray;padding:5px;">
<div id="child21" style="width:100px;height:100px;background:gold;float:left;">Child21</div>
<div id="child22" style="width:100px;height:100px;background:gold;float:right;">Child22</div>
<div style="clear:both;"></div>
</div>
<script type="text/javascript">
function on(el,type,fn){
el.addEventListener ? el.addEventListener(type, fn, false) : el.attachEvent('on' + type, fn);
}
function $(id){
return document.getElementById(id);
}
var p1 = $('parent1'),
p2 = $('parent2');
function fn(e){
/* var d = document.createElement('div');
d.innerHTML = e.type;
$('result').appendChild(d);*/
//alert("我进父亲了")
document.getElementById('result').innerHTML= document.getElementById('result').innerHTML+"进父亲";
}
function fn2(e){
/* var d = document.createElement('div');
d.innerHTML = e.type;
$('result').appendChild(d);*/
document.getElementById('result').innerHTML=document.getElementById('result').innerHTML+"进儿子";
}
function fn3(e){
/* var d = document.createElement('div');
d.innerHTML = e.type;
$('result').appendChild(d);*/
//alert("我进父亲了")
document.getElementById('result').innerHTML= document.getElementById('result').innerHTML+"出父亲";
}
function fn4(e){
/* var d = document.createElement('div');
d.innerHTML = e.type;
$('result').appendChild(d);*/
document.getElementById('result').innerHTML=document.getElementById('result').innerHTML+"出儿子";
}
on(p1,'mouseover',fn);
on(child11,'mouseover',fn2);
on(p1,'mouseout',fn3);
on(child11,'mouseout',fn4);
//on(p2,'mouseenter',fn);
on(p2,'mouseenter',fn);
on(child21,'mouseenter',fn2);
on(p2,'mouseleave',fn3);
on(child21,'mouseleave',fn4);
</script>
<body>
<html>
<head>
<meta charset="utf-8">
<title>mouseerter与mouseover区别(IE下测试)</title>
</head>
<body>
<div id="result" style="position:absolute;right:100px;top:5px;width:250px;height:400px;border:2px solid gray;overflow:auto;">
</div>
<h3>1,鼠标在div[id=parent1]内部移动时会触发mouseover事件</h3>
<div id="parent1" style="width:400px;border:1px solid gray;padding:5px;">
<div id="child11" style="width:100px;height:100px;background:gold;float:left;">Child11</div>
<div id="child12" style="width:100px;height:100px;background:gold;float:right;">Child12</div>
<div style="clear:both;"></div>
</div>
<br/>
<h3>2,鼠标在div[id=parent2]内部移动时不会触发mouseenter事件</h3>
<div id="parent2" style="width:400px;border:1px solid gray;padding:5px;">
<div id="child21" style="width:100px;height:100px;background:gold;float:left;">Child21</div>
<div id="child22" style="width:100px;height:100px;background:gold;float:right;">Child22</div>
<div style="clear:both;"></div>
</div>
<script type="text/javascript">
function on(el,type,fn){
el.addEventListener ? el.addEventListener(type, fn, false) : el.attachEvent('on' + type, fn);
}
function $(id){
return document.getElementById(id);
}
var p1 = $('parent1'),
p2 = $('parent2');
function fn(e){
/* var d = document.createElement('div');
d.innerHTML = e.type;
$('result').appendChild(d);*/
//alert("我进父亲了")
document.getElementById('result').innerHTML= document.getElementById('result').innerHTML+"进父亲";
}
function fn2(e){
/* var d = document.createElement('div');
d.innerHTML = e.type;
$('result').appendChild(d);*/
document.getElementById('result').innerHTML=document.getElementById('result').innerHTML+"进儿子";
}
function fn3(e){
/* var d = document.createElement('div');
d.innerHTML = e.type;
$('result').appendChild(d);*/
//alert("我进父亲了")
document.getElementById('result').innerHTML= document.getElementById('result').innerHTML+"出父亲";
}
function fn4(e){
/* var d = document.createElement('div');
d.innerHTML = e.type;
$('result').appendChild(d);*/
document.getElementById('result').innerHTML=document.getElementById('result').innerHTML+"出儿子";
}
on(p1,'mouseover',fn);
on(child11,'mouseover',fn2);
on(p1,'mouseout',fn3);
on(child11,'mouseout',fn4);
//on(p2,'mouseenter',fn);
on(p2,'mouseenter',fn);
on(child21,'mouseenter',fn2);
on(p2,'mouseleave',fn3);
on(child21,'mouseleave',fn4);
</script>
<body>
</html>
//我想阻止冒泡是可以解决这个mouseover mouseout问题的,但是我感觉会很麻烦,因为你想如果从父亲进入儿子,会先执行下出父亲,然后进儿子,冒泡个父亲,发生进父亲,最后出儿子的时候,会先出儿子,冒泡给父亲,出父亲,然后进父亲,你看这么多,阻止起来实在是麻烦。还有你想进儿子的时候要先执行个出父亲,这就不好弄,
所以觉得用enter leave 但是这个非IE不支持,当然我最新的FF,chrome,都支持,所以说最后你还是用jQ的这2个事件吧,然后就OK