彻底研究mouseover mouseout mouseenter mouseleave

最新推荐文章于 2023-11-15 15:15:38 发布

原创最新推荐文章于 2023-11-15 15:15:38 发布 · 655 阅读

0 ·

CC 4.0 BY-SA版权

javascript 专栏收录该内容

1 篇文章

订阅专栏

本文通过实例演示了在不同浏览器环境下，尤其是IE中，mouseover与mouseenter事件触发行为的不同。通过对比两个事件在父子元素间的触发情况，展示了它们的行为差异。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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>

//我想阻止冒泡是可以解决这个mouseover mouseout问题的，但是我感觉会很麻烦，因为你想如果从父亲进入儿子，会先执行下出父亲，然后进儿子，冒泡个父亲，发生进父亲，最后出儿子的时候，会先出儿子，冒泡给父亲，出父亲，然后进父亲，你看这么多，阻止起来实在是麻烦。还有你想进儿子的时候要先执行个出父亲，这就不好弄，

所以觉得用enter leave 但是这个非IE不支持，当然我最新的FF，chrome,都支持，所以说最后你还是用jQ的这2个事件吧，然后就OK