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动画的时候,会发现移入移出过快 动画还没加载完成就需要执行下一个动画,完了动画样式就错乱了. 这时候 ...
随机推荐
- 2746:约瑟夫问题poj
2746:约瑟夫问题 总时间限制: 1000ms 内存限制: 65536kB 描述 约瑟夫问题:有n只猴子,按顺时针方向围成一圈选大王(编号从1到n),从第1号开始报数,一直数到m,数到m的猴子退 ...
- Web Mining and Big Data 公开课学习笔记 ---lecture1
1.1 LOOK Finding "stuff" on the web or computer or room or hidden in data Finding documen ...
- Bootstrap 开关（switch）使用整理
1.在JS里根据指定的 1或者0 或者其它值让按钮变成 on 或者 off (通常需要根据数据库查询的结果初始化开关的状态) (--开关插件包 bootstrap-switch.min.js) < ...
- Servlet与Jsp的结合使用实现信息管理系统二
PS:前面说了抽取框架的搭建,接着就要我们开始进入网址的时候就要查到全部信息并显示在首页,我们用到的MySql数据库,具体步骤是: 创建数据库,创建表,添加信息 项目中调入mysql的jar包 mys ...
- 算法训练 K好数
算法训练 K好数 时间限制:1.0s 内存限制:256.0MB 问题描述 如果一个自然数N的K进制表示中任意的相邻的两位都不是相邻的数字,那么我们就说这个数是K好数.求L位K进制数中K好数 ...
- 如何在PHP7中安装mysql的扩展
相对与PHP5,PHP7的最大变化之一是移除了mysql扩展,推荐使用mysqli或者pdo_mysql,实际上在PHP5.5开始,PHP就着手开始准备弃用mysql扩展,如果你使用mysql扩展,可 ...
- Dagger2进阶必备技能
之前写过一篇文章介绍Dagger2的初步知识, 本篇文章主要介绍Dagger2的进阶知识点. 主要包含的内有有 @Binds与@Provides的使用 Provider与Lazy的使用 依赖与包含 D ...
- PTA题---求两个有序序列中位数所体现的思想。
---恢复内容开始--- 近日,在做PTA题目时,遇到了一个这样的题,困扰了很久.题目如下:已知有两个等长的非降序序列S1, S2, 设计函数求S1与S2并集的中位数.有序序列A0,A1, ...
- MEAN 全栈开发 ——实现简单博客
最近在学习MEAN全栈开发的过程中,写了一个小程序就当练练手熟悉一下怎么去组合强大的功能. 废话不多说,直接上文件预览: 整体文件结构: 其中,public文件夹存放了img,js,css文件,其中的 ...
- myeclipse将java项目转换成web项目，导出war包
1.项目右击属性,勾选以下两项,点击apply,关掉窗体,又一次打开 2.打开assembly,删掉webroot文件夹.把相应的webapp文件夹加入进来 watermark/2/text/aHR0 ...