2015-06-02 js中的关于的移入移出触发事件的顺序-优快云博客

本文通过实例详细解析了HTML、CSS和JavaScript中mouseover与mouseenter事件的区别，特别是在嵌套元素中的行为差异，帮助开发者更好地掌握鼠标事件的触发逻辑。

html   （结构很重要，包裹）
<div class="a">
    	<div class="b"></div>
 </div>
css
.a{width: 200px;height: 200px;border: 1px solid #000;position: absolute;}
.b{width: 100px;height: 100px;border: 1px solid #000;position: absolute;}

js
//这里是mouseover & mouseout
$('.a').on('mouseover',function () {
	alert('a in');
}).on('mouseout',function () {
	alert('a out');
})
$('.b').on('mouseover',function () {
	alert('b in');
}).on('mouseout',function () {
	alert('b out');
})
//移入a          a in
//从a到b         a out----b in-----a in
//从b到外        b out-----a out-----a in
//从b到a         b out----a out----a in


//这里是mouseenter & mouseleave ps:jq的hover代表mouseenter和mouseleave
$('.a').on('mouseenter',function () {
	alert('a in');
}).on('mouseleave',function () {
	alert('a out');
})
$('.b').on('mouseenter',function () {
	alert('b in');
}).on('mouseleave',function () {
	alert('b out'); 
})
//移入a          a in
//从a到b         b in
//从b到a         b out
//移出a          a out

转载于:https://www.cnblogs.com/wz0107/p/4547047.html