js鼠标移入移出事件对比

ie8之前的方法
鼠标移出 mouseover
鼠标移入 mouseout

ie8之后的方法
鼠标移出 mouseenter
鼠标移入 mouseleave

两者区别

	<div id="red"><div id="blue">0div>  div><script>var red=document.getElementById("red")var blue=document.getElementById("blue")var i=0red.onmouseover=function(){ blue.innerHTML=++i } script>

蓝色div是红色div的子元素，给红色div绑定鼠标移入事件，事件为显示递增数字，如【图1】（注：图中黑色箭头表示鼠标移入）

如果绑定的是mouseover，鼠标不仅会在进入红色div时触发，如【图2】
还会在进入蓝色div的边界时触发，如【图3】

如果绑定的是mouseenter，则不会出现【图3】的情况，

如果蓝块还是红块的子元素，但使用定位，使红块与蓝块视觉上不重合，会怎么样？

虽然视觉上分离了，但是结构上依然存在，结果与重合的情况相同，
鼠标进入蓝块依然可以触发红块的事件

如果红块与蓝块是兄弟关系，使用定位将其重叠在一起，会怎么样？

当两者只是重叠在一起的兄弟元素
使用mouseover与mouseenter都是如下情况：
鼠标从蓝块进入，并不会触发红块的移入事件，如【图4】
而从蓝块进入红块却会触发事件，如【图6】

结论

对于事件绑定的元素，溢出的子元素是事件触发区域的延伸，重叠的兄弟元素是事件触发区域的剔除
1.mouseover与mouseout会在事件绑定元素的子元素上移入移出时再次触发，而mouseenter与mouseleave不会有这种bug
2.在事件绑定元素与子元素视觉上分离时，四种API都会将子元素溢出父元素的部分也视为父元素的触发区域
3.当没有父子关系的两个元素重叠在一起时，绑定事件的元素会将被覆盖的部分剔除触发区域

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！