mouseenter、mouseleave、mouseover、mouseout理解
发布日期:2022-02-17 02:39:47 浏览次数:18 分类:技术文章

本文共 690 字,大约阅读时间需要 2 分钟。

前言

由于用到这几个事件,记录一下这几个事件的测试结果。

元素内无子元素

aaaaaa
bbbbbbb
let aoutdiv = document.getElementById("a1")	let boutdiv = document.getElementById("b1")	aoutdiv.addEventListener('mouseenter',function(e){   		console.log('a--enter')	})	aoutdiv.addEventListener('mouseleave',function(e){   		console.log('a--leave')	})		boutdiv.addEventListener('mouseover',function(e){   		console.log('b--over')	})	boutdiv.addEventListener('mouseout',function(e){   		console.log('b--out')	})

测试结果:完全一样

元素内有子元素

a外层
a内层
b外层
b内层

测试结果:

在这里插入图片描述

总结

mouseenter、mouseleave不管有没有子元素,只执行一次【进入该区域和退出该区域】

mouseover、mouseout有子元素时,鼠标在子元素和父元素其他区域都会触发

转载地址:https://blog.csdn.net/qq_39811414/article/details/108285228 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:采坑记-读取本地图片
下一篇:centos6.8安装docker

发表评论

最新留言

感谢大佬
[***.8.128.20]2023年06月04日 06时15分38秒

关于作者

    喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!

最新文章

pae扩展内存 linux,浅析linux内核内存管理之PAE 2019-08-28 15:52:18
linux 端口方法防火墙,Linux 打开端口方法(防火墙操作) 2019-08-28 15:52:18
linux中echo命令不输出换行,shell脚本echo输出不换行功能增强实例 2019-08-28 15:52:17
linux将屏幕输出到文件,Linux命令执行的屏幕输出内容重定向到日志文件 2019-08-28 15:52:17
matlab支持 编程语言,用于数学的10个优秀编程语言 2019-08-28 15:52:16
oracle启动报错ora11157,ora-01410錯誤﹐在線等待﹗ 2019-08-28 15:52:16
电力系统潮流计算matlab程序,大神们,求个电力系统潮流计算的matlab程序。 2019-08-28 15:52:15
oracle 扩展分区,Oracle 在线扩展分区 2019-08-28 15:52:15
新浪微博搜索php待遇,新浪微博面试 2019-08-28 15:52:14
php把表单转为json保存,javascript – 使用jquery将表单数据保存到本地json文件中 2019-08-28 15:52:14
oracle rman 用户,对Oracle数据库进行RMAN备份的Oracle数据库用户权限 2019-08-28 15:52:13
oracle中execute函数,oracle Execute Immediate(sql语句) 2019-08-28 15:52:13
oracle数值型转为char类型,PLSQL: Oracle函数to_char转化数字型指定小数点位数的技巧... 2019-08-28 15:52:13
dede rss.php,DeDeCMS dede 织梦cms RSS全站静态输出的实现方法 2019-08-28 15:52:12
php 崩溃 输出,php – 创建可崩溃的print_r()var_dump()的函数? 2019-08-28 15:52:12
zabbix前端php界面,Zabbix Web UI 2019-08-28 15:52:11
php curl伪装cookies,php curl 添加cookie伪造登陆抓取数据 2019-08-28 15:52:11
请假管理网站php,index.php 2019-08-28 15:52:10
excel 26进制 php,记录一次华为招聘的编程题-excel中的26进制 2019-08-28 15:52:10
mysql判断条件用法,MySQL数据库讲解条件判断函数 MySQL数据库使用教程 2019-08-28 15:52:09