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

本文共 694 字,大约阅读时间需要 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

发表评论

最新留言

逛到本站,mark一下
[***.202.152.39]2024年04月17日 16时19分41秒

关于作者

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

推荐文章