mouseout、mouseover和mouseleave、mouseenter区别

mouseenter：当鼠标移入某元素时触发。

mouseleave：当鼠标移出某元素时触发。

mouseover：当鼠标移入某元素时触发，移入和移出其子元素时也会触发。

mouseout：当鼠标移出某元素时触发，移入和移出其子元素时也会触发。

mousemove：鼠标在某元素上移动时触发，即使在其子元素上也会触发。

mouseout、mouseover和mouseleave、mouseenter最大的区别，在于子元素连带触发。

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.a{
width: 500px;
height: 500px;
background: aliceblue;
}
.b{
width: 200px;
height: 200px;
background: beige;
}
.c{
width: 100px;
height: 100px;
background: violet;
}
</style>
</head>
<body>
<div class="a">A
<div class="b"
οnmοuseenter="mouseenter()"
οnmοuseleave="mouseleave()"
οnmοuseοut="mouseout()"
οnmοuseοver="mouseover()"
οnmοusemοve="mousemove()">B
<div class="c">C
</div>
</div>
</div>
<script>
function mouseenter(){
console.log('mouseenter')
}
function mouseleave(){
console.log('mouseleave')
}
function mouseout(){
console.log('mouseout')
}
function mouseover(){
console.log('mouseover')
}
function mousemove(){
console.log('mousemove')
}
</script>
</body>
</html>

转载于:https://www.cnblogs.com/Loveonely/p/7802942.html

mouseout、mouseover和mouseleave、mouseenter区别相关推荐

mouseover与mouseenter，mouseout和mouseleave的区别
mouseover与mouseenter,mouseout和mouseleave的区别 Introdece 想起来这个就来气.举个例子,做轮播图的时候,当鼠标移动到前后的按钮的时候要清除掉定时器.我的 ...
mouseout、mouseover和mouseleave、mouseenter的区别
mouseenter:当鼠标移入某元素时触发. mouseleave:当鼠标移出某元素时触发. mouseover:当鼠标移入某元素时触发,移入和移出其子元素时也会触发. mouseout:当鼠标移出 ...
JavaScript中的mouseover与mouseenter，mouseout和mouseleave的区别
1.mouseover与mouseenter mouseover事件:不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件. mouseenter事件:只有在鼠标指针穿过被选元素时, ...
mouseover事件和mouseenter事件以及mouseleave事件和mouseout事件的区别
1.mouseover事件与mouseenter事件 mouseover事件:不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件. mouseenter事件:只有在鼠标指针穿过被选 ...
mouseout、mouseover和mouseleave、mouseenter
关于mouseover ,mouseout ,mouseenter,mouseleave冒泡机制问题 mouseenter:当鼠标移入某元素时触发. mouseleave:当鼠标移出某元素时触发. m ...
mouseOver/mouseOut 与 rollOver/rollOut的区别
一直在做有关鼠标移动都是用mouseOver,mouseOut. 但是最近做一個项目的时候用mouseOver,mouseOut出问题.后来网络上找了一下关于mouseOver,mouseOut的研究 ...
转载：mouseOver/mouseOut 与 rollOver/rollOut的区别
一直在做有关鼠标移动都是用mouseOver,mouseOut. 但是最近做一個项目的时候用mouseOver,mouseOut出问题.后来网络上找了一下关于mouseOver,mouseOut的研究 ...
mouseOver和mouseLeave事件在vue中的应用
目标:利用mouseOver和mouseLeave实现鼠标移入和移出时的不同效果. 初始状态: 点击最右侧按钮后的效果:(具体实现方法见下篇文章) 要完成的效果:在"已完成编辑 √" ...
jquery中的mouseover、mouseout 和 mouseenter 、 mouseleave的区别
原文地址:http://www.5ixiudou.com/portal/detailInfo/1000000005/286 现在有这样一种需求,鼠标放置到有灰色背景框的div上之后,显示操作按钮,编 ...

mouseout、mouseover和mouseleave、mouseenter区别

mouseout、mouseover和mouseleave、mouseenter区别相关推荐

最新文章

热门文章