【宝宝懵逼系列】
唉,这两个坑爹的东西,特别想说只可意会不可言传,我严重怀疑自己能不能解释明白。。。
首先,宝宝试了两个浏览器:最爱的Chrome和FireFox,结果是:
enter是捕获阶段执行,over是冒泡阶段执行
也就是说对于下面这种结构,
<div id="div1">
<div id="div2">
<div id="div3"></div>
</div>
</div>
使用mouseenter,鼠标只移入div3(但看上去没移入div2和div1)的时候,控制台输出
使用mouseover,鼠标只移入div3(但看上去没移入div2和div1)的时候,控制台输出
2. 从div1 => div2 => div3 => div2 => div1(此过程无理数始终不离开div1)输出内容不同:
mouseenter的过程:
过程是酱紫的:
移入蓝色的时候输出“div1 div2 div3”,从蓝色移入橙色,不输出,从橙色移入绿色,不输出,
返回来,从绿色移入橙色,只输出“div2”,从橙色移入蓝色,只输出“div3”
mouseover的过程:
过程是酱紫的:
移入蓝色的时候输出“div3 div2 div1”,从蓝色移入橙色,输出“div2 div1”,从橙色移入绿色,输出“div1”,
返回来,从绿色移入橙色,输出“div2 div1”,从橙色移入蓝色,输出“div3 div2 div1”。
总结就是两句话:
- 不论鼠标指针穿过备选元素或其子元素,都会触发“mouseover”,对应mouseout;
- 只有鼠标指针划过备选元素时,才会触发mouseenter事件,对应mouseleave。