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动画的时候,会发现移入移出过快 动画还没加载完成就需要执行下一个动画,完了动画样式就错乱了. 这时候 ...
随机推荐
- Python 动态添加类方法
习题: 1. Shape基类,要求所有子类都必须提供面积的计算,子类有三角形.矩形.圆. 2. 上题圆类的数据可序列化 第一种方法:使用Mixin多继承组合的方式,混入其它类的属性和方法 第二种方法: ...
- lumen 中间件详解
我来给大家,讲解一下lumen中的中间件,高手勿喷. 首先,我们看下lumen中文档中的写法,我这里看的是5.3中文文档.https://lumen.laravel-china.org/docs/5. ...
- 分布式监控系统Zabbix3.2跳坑指南
zabbix是什么在此就不多作介绍了,可以参考之前的文章 零代码如何打造自己的实时监控预警系统 ,这篇主要介绍安装及注意事项. 主要分为服务端和客户端安装,客户端又分为Linux.Windows. 服 ...
- 超级有用的Vim命令
你是否曾经烦恼,每次编辑vim文件,想要跳到一行结尾,需要按多次右键,每次想找到某个字符的位置,都得用肉眼去观察,每次想跳到文件结尾,都要按多次向下键.现在,你不必担心这些繁杂的过程,因为我们完全可以 ...
- test only
Test TinyMCE only , Test Link
- 备忘录模式（Memento）
备忘录模式(Memento) 主要目的是保存一个对象的某个状态,以便在适当的时候恢复对象,个人觉得叫备份模式更形象些,通俗的讲下:假设有原始类A,A中有各种属性,A可以决定需要备份的属性,备忘录类B是 ...
- HDU2159--二维费用背包，三重背包
FATE Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Submi ...
- 一个PHP高性能、多并发、restful的工具库（基于multi_curl）
This is high performance curl wrapper written in pure PHP. It's compatible with PHP 5.4+ and HHVM. N ...
- [安全]PHP能引起安全的函数
php中需要禁用以下函数来提高安全性 打开php.ini 找到 disable_functions .然后禁用以下函数 [C] 纯文本查看 复制代码 ? 1 disable_functions = ...
- 对于vue.js初步了解
由于本人做的是javaWeb的开发,对于前端的了解还是有限,今天对于vue.js了解了下(主要是看官方api),把自己的心得说一下,希望各位大神可以补充,谢谢 http://www.runoob. ...