mouseover事件mouseenter事件mouseleave事件和mouseout事件之间的区别与联系
文章目录
- 两者定义
- 两两区别
- 例子
- 小结
两者定义
mouseover
:鼠标覆盖
mouseenter
:鼠标进入
mouseleave
:鼠标移出
mouseout
:鼠标移出
两两区别
- 既会捕获也会冒泡
mouseover
鼠标指针穿过被选元素或是其子元素都会触发
mouseout
鼠标指针移出被选元素或是其子元素都会触发 - 只会捕获不会冒泡
mouseenter
只有鼠标指针穿过被选元素才会触发
mouseleave
只有鼠标指针移出被选元素才会触发
例子
我们同时对大div加上这四个属性,然后从左向右移动鼠标
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>#big{height: 500px;width: 500px;background-color: aqua;margin:auto;}#small{height: 200px;width: 200px;background-color: rgb(36, 37, 37);margin:auto;}
</style>
<body><div id="big"><div id="small"></div></div><script>let big=document.getElementById('big')big.onmouseover=function(){console.dir('mouseover')}big.onmouseout=function(){console.dir('mouseout')}big.onmouseenter=function(){console.dir('mouseenter')}big.onmouseleave=function(){console.dir('mouseleave')}</script></body>
</html>
我们对鼠标移动的四个交叉点进行标记
效果展示:
在一号节点鼠标进入选中元素触发了:
mouseover
mouseenter
在二号节点鼠标离开选中元素并进入选中元素的子元素触发了:
mouseout
mouseover
在三号节点鼠标离开选中元素的子元素并进入选中元素触发了:
mouseout
mouseover
在四号节点鼠标离开选中元素触发了:
mouseout
mouseleave
小结
mouseover
与mouseout
成对,mouseenter
与mouseleave
成对
简记:两个后面含o
的一对是全能;两个后面含se
的一队只会一半。
mouseover
触发优先级高于mouseenter
,mouseout
触发优先级高于mouseleave
简记:先离开后进入
mouseover事件mouseenter事件mouseleave事件和mouseout事件之间的区别与联系相关推荐
- jquery的鼠标移入移出事件hover、mouseenter、mouseleave、mouseover、mouseout
hover:鼠标进入元素的子元素时不会触发'鼠标移开'的事件: mouseenter.mouseleave:效果与hover相同: mouseover: 鼠标进入元素和进入它的子元素时都会触发'mou ...
- 鼠标事件mousemove、mouseover、mouseout、mouseenter、mouseleave
Mousemove: 当鼠标指针在元素内移动时,mousemove事件就会被触发,任何HTML元素都可以接受此事件. Mousemove 事件是当鼠标指针移动时触发的,即使是一个像素.这意味着多个事件 ...
- mouseover事件和mouseenter事件以及mouseleave事件和mouseout事件的区别
1.mouseover事件与mouseenter事件 mouseover事件:不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件. mouseenter事件:只有在鼠标指针穿过被选 ...
- javascript中mouseover和mouseout事件详解
原文链接:http://blog.sina.com.cn/s/blog_468530a60101awlw.html 与 mouseenter 事件不同,不论鼠标指针穿过被选元素或其子元素,都会触发 ...
- 鼠标事件(mouseover和mouseenter)
下拉菜单案例 前言 一.mouseover和mouseenter的不同点 1.事件的触发时机 2.是否支持冒泡 二.案例 总结 前言 自己做下拉菜单的时候,突然发现mouseover和mouseent ...
- mouseover和mouseout事件在鼠标经过子元素时也会触发
javascript的mouseover和mouseout事件,在绑定元素内部有子元素的情况下, 经过绑定元素时会多次触发mouseover和mouseout事件. jquery解决办法: jquer ...
- JavaScript---常用的鼠标事件mouseover 和mouseenter的区别
一. mouseover 和mouseenter的区别 mouseover: 只要鼠标指针移入事件所绑定的元素或其子元素,都会触发该事件 mouseenter: 只有鼠标指针移入事件所绑定的元素时, ...
- 鼠标移入移出事件,mouseover、mouseenter区别
简单介绍: js中有两组鼠标移入移出事件:(旧的)mouseover.mouseout与(新的)mouseenter.mouseleave,不建议混着使用. 两者的区别是,新的鼠标移入移出事件,去掉了 ...
- Vue实现鼠标悬浮隐藏与显示图片效果 @mouseenter 和 @mouseleave事件
前言 前端vue 有个功能是鼠标移动到指定item上显示出来一个编辑和删除的图标 鼠标悬停在列表那么需要有悬浮显示的列表编辑和删除icon 文字不好描述,因为是web端录屏也比较麻烦 这里用截图说明 ...
最新文章
- 腾讯以及各大厂的 C++ 开发环境是什么样的?
- nfs漏洞修复(showmount -e)
- 滚动条颜色样式设置 说明
- app推送以及提示音java,springboot 整合 Jpush 极光推送
- 原理系列:Spark1.x 生态圈一览
- 拖拽批量上传图片如何保证 顺序_图片压缩神器和图片分割工具,美工设计和运营终于得救了...
- 深度分析DROP,TRUNCATE与DELETE的区别【我的数据库之路系列】
- mysql root 注入_sql注入入门之mysqlroot权限下的注入利用方式
- C语言如何处理不定长度参数,C语言中不定参数的实现
- gan通过python实现_python通过requests库实现爬虫(二)
- 如何修改SQL Server 2008数据库服务器名称
- 两条信号之间加电容_信号完整性SI读书笔记之一
- c语言中冒泡排序、插入排序、选择排序算法比较
- 7.2.Zeng_Cache(3) --- 前端
- linux MySQL5.7 rpm安装
- python3.5 pip升级_ubuntu下 python3.5 pip3的安装 升级与卸载
- Kinect unity三维重建
- CAS5.3版本对接Jenkins单点登录
- 统计字符 c语言程序,统计字符个数C语言程序.doc
- 介绍Hosts文件和DNS及DNS的解析过程