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动画的时候,会发现移入移出过快 动画还没加载完成就需要执行下一个动画,完了动画样式就错乱了. 这时候 ...
随机推荐
- Android 个推 踩坑小结
公司一个项目之前在手机上一直可以正常运行,后来在平板上运行了一下,在欢迎页面卡出了,一直没有反应. 于是我就将项目在电脑上用Android Studio往平板上运行了一遍,看了下打印的Log日志,发现 ...
- C#图片压缩上传
/// <summary> /// 压缩图片 /// </summary> /// <param name="iSource">图片文件< ...
- selenium+python对页面元素进行高亮显示
调用js方法: execute_script(script,*args) Arguments对象: 类数组对象,代表传给一个function的参数列表,当前函数的内置属性,其长度是由实参个数决定而不是 ...
- 关于java' web杂谈（其实是课后作业1）1 网站系统开发需要掌握的技术
1 网站系统开发需要掌握的技术:(借鉴度娘)https://zhidao.baidu.com/question/1701850648247880220.html 需要掌握的有:Java(JavaEE) ...
- 01---Spring框架
Spring框架简介及官方压缩包目录介绍 工厂模式 Spring环境搭建 IoC详解 Spring创建Bean的三种方式(包含两种工厂方式) scope属性讲解 DI详解 Spring中几种注入方式 ...
- SPOJ SERGRID - Grid BFS
SERGRID - Grid no tags You are on an nxm grid where each square on the grid has a digit on it. From ...
- java实现导出Excel(跨行，跨列)
先来个最终结果样式: 第一步: 传参,后期可根据自己需要进行调整.我这里需要的是 quarter 代表季度 dptid 部门编号根据接受过来的参数进行文档命名. UserInfo userInfo=( ...
- 调用WebService获取数据
以下调用方法,以调用苏州天气接口为例. 一.后台请求服务 方法一.C#后台,通过构建Soap请求接口数据 //获取天气详细信息 public JsonResult GetWeatherDetails( ...
- SSIS中循环遍历组件[Foreach Loop Container]
背景 每月给业务部门提取数据,每个分公司都要提取一般,先跑SQL,再粘贴到Excel中,然后发邮件给相关的人员.费时费力,还容易粘贴错位.因此,需要通过一个程序完成这些步骤.我首先想到的是通过SSIS ...
- handler 源代码分析
handler Looper 轮询器 MessageQueue 消息对象 1 主线程在一创建的时候就会调用, public static void prepareMainLooper() {}构造方法 ...