mouseover和mouseenter两个事件有什么区别？

首先回忆下鼠标事件有哪些：

• mouseup：鼠标按下
• mousedown：鼠标放开
• mouseover：鼠标进入
• mouseout：鼠标离开
• mouseenter：鼠标进入
• mouseleave：鼠标离开
• mousemove：鼠标移动

那么mouseenter和mouseover的区别呢？？

demo1：

html部分：

<button onmouseover=‘myMouseOver’  onmouseout='myMouseOut'>click Me one</button>

<button onmouseenter=‘myMouseEnter’  onmouseleave='myMouseLeave'>click Me two</button>

js部分：

function myMouseOver(){
  console.log('--------over')  
}

function myMouseOut(){
  console.log('--------out')  
}

function myMouseEnter(){
  console.log('--------enter')  
}

function myMouseLeave(){
  console.log('--------leave')  
}

上面例子可以看出：mouseover和mouseenter没有区别。下面再看

demo2：

html部门分:

<div style='width:200px;height:50px;background:red;' onmouseover=‘myMouseOver’  onmouseout='myMouseOut'>
　　<button>click Me one</button>
</div>

<div style='width:200px;height:50px;background:blue;' onmouseenter=‘myMouseEnter’  onmouseleave='myMouseLeave'>
　　<button>click Me two</button>
</div>

js部分不变，同demo1

结果：

绿色进入红色：--------over

红色进入按钮one：--------out  --------over

按钮one进入红色：--------out  --------over

红色进入绿色：--------out

 

绿色进入蓝色：--------enter

红色进入按钮two：

按钮one进入红色：

红色进入绿色：--------leave

 

转载于:https://www.cnblogs.com/yddlvo/p/9036386.html