
mouseenter、mouseleave、mouseover、mouseout理解
发布日期:2022-02-17 02:39:47
浏览次数:18
分类:技术文章
本文共 690 字,大约阅读时间需要 2 分钟。
前言
由于用到这几个事件,记录一下这几个事件的测试结果。
元素内无子元素
aaaaaabbbbbbb
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 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!
发表评论
最新留言
感谢大佬
[***.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