mouseout、mouseover和mouseleave、mouseenter区别
今天在使用鼠标事件时，用错了mouseout，于是做个测试总结。
结论：
mouseenter：当鼠标移入某元素时触发。
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"
onmouseenter="mouseenter()"
onmouseleave="mouseleave()"
onmouseout="mouseout()"
onmouseover="mouseover()"
onmousemove="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>
效果：
操作：
从A元素到C元素，再从C回到A，控制台输出如下：
演示地址：
mouseout、mouseover和mouseleave、mouseenter区别的更多相关文章
- jquery的hover mouseover mouseout mouseenter mouseleave的区别
jquery的hover mouseover mouseout mouseenter mouseleave的区别 1.mouseover mouseout mouseover - 鼠标指针经过任何子元 ...
- mouseover，mouseout，mouseenter，mouseleave的区别
相信做前端开发的都听说过“冒泡型事件”吧,<JavaScript高级程序设计>第九章有详细的讲述,但是,在学习的时候一知半解,也没详细去理解,导致最近在工作中碰到了问题:有许多 li 标签 ...
- mouseover,mouseout和mouseenter,mouseleave的区别及适用情况
在做类似于百度地图右下角,不同地图切换UI时,遇到了问题. 就是鼠标滑过的时候出现一个层,当鼠标滑到当前层的话mouseover和mouseout在低版本的浏览器会出现闪动的现象,最简单的那就是把mo ...
- jquery mouseout mouseover 多次执行
用jquery,mouseout,mouseover,随着鼠标移动,事件被触发了多次(冒泡),换成js onmouseover,onmouseout也是一样.最终的解决办法是,用jquery,mous ...
- mouseover,mouseout,mouseenter,mouseleave的区别
1.前言 今天下午参加一个面试,对方问我写不写博客,这时候才猛然意识到好久没写东西了.最近一直在外边实习,每天有很多经历和挑战,但是却没有及时地记录下来,这一点必须得批评自己,以后得经常把自己遇到的问 ...
- mouseover和mouseenter，mouseout和mouseleave的区别-引发的探索
相信小伙伴们都用过鼠标事件,比如mouseover和mouseout,mouseenter和mouseleave.它们都分别表示鼠标移入移出. 在使用的过程中,其实一直有个小疑问——它们之间究竟有什么 ...
- jQuery mouseover与mouseenter,mouseout与mouseleave的区别
mouseover与mouseenter 不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件. 只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件. mouseou ...
- mouseover与mouseenter与mousemove的区别mouseout与mouseleave的区别
<html> <head> <title></title> </head> <body> <p> 当鼠标进入div1 ...
- 关于事件mouseover ,mouseout ,mouseenter,mouseleave的区别
轮播中大多会选择mouseover和mouseout 这个时候是没有任何问题的 但当遇到有css3动画的时候,会发现移入移出过快 动画还没加载完成就需要执行下一个动画,完了动画样式就错乱了. 这时候 ...
随机推荐
- Entity Framework——常见报错总结
1 实体属性配置为IsRequired()对更新的影响 抛出异常类型DbEntityValidationException 表结构: 实体: public class User { public in ...
- ASP.NET MVC5+EF6+EasyUI 后台管理系统（88）-Excel导入和导出-自定义表模导出
前言 之前说了导入和导出,也提供了自定义的表模的导入,可见LinqToExcel可以做的事情不仅仅如此 这次我们来演示比较复杂的导出Excel,导出复杂的Excel与导入复杂的Excel原理基本是一样 ...
- JS获取URL参数的值
function getQueryValue (key) { const reg = new RegExp('(^|&)' + key + '=([^&]*)(&|$)', ' ...
- lua lua解读
1.线程状态宏定义(thread status) #define LUA_OK 0 #define LUA_YIELD 1 #define LUA_ERRRUN 2 #define LUA_ERRSY ...
- heartbeat+DRBD 高可用 双机热备
heartbeat+DRBD 高可用 双机热备 原创博文http://www.cnblogs.com/elvi/p/7658109.html ## heartbeat+DRBD 高可用 双机热备 # ...
- Retrofit网络请求库应用01
PS:什么是Retrofit? 在官方文档中有这样一句话--A type-safe HTTP client for Android and Java(一个类型安全的http client库),具体的话 ...
- 矩阵的奇异值分解（SVD）（理论）
矩阵的奇异值分解(Singular Value Decomposition,SVD)是数值计算中的精彩之处,在其它数学领域和机器学习领域得到了广泛的应用,如矩阵的广义逆,主分成分析(PCA),自然语言 ...
- 在外围获取APP的机密信息
叶孤城原创,转载须授权. 小白:偷窥狂,不,叶城主,怎么还不发起攻击,还在外围搞什么? 叶孤城:闭嘴,能外围解决的问题就不要破解,你以为你会天外飞仙啊! 小白:-- 本文解决一个问题:通过抓包分析出重 ...
- Python学习之--socket
1.Socket概述 网络上的两个程序通过一个双向的通信连接实现数据的交换,这个连接的一端称为一个socket.socket通常也称作"套接字",用于描述IP地址和端口,是一个 ...
- jmeter接口系列：时间戳、加密
JMeter安装配置 从官网下载JMeter的软件包apache-jmeter-x.x.zip,下载完成之后解压打开jmeter.bat即可. 说明 这里使用的jmeter版本是3.0,jdk版本是j ...