DOM---鼠标事件类型(移入移出)

移入 移出mouseenter mouseleave

在父盒子上触发,在孩子盒子上不触发

移入 移出mouseover mouseout全触发

html 复制代码
<!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>
    <style>
        #box{
            width: 200px;
            height: 200px;
            background: yellow;
        }
        #child{
            width: 100px;
            height: 100px;
            background: red;
        }
    </style>
</head>
<body>
    <div id="box">鼠标移入移出
        <div id="child"></div>
    </div>
    <script>

        // 移入  移出mouseover    mouseout
        // 都触发
        box.onmouseover = function(){
            console.log("鼠标移入")
        }

        box.onmouseout = function(){
            console.log("鼠标移出")
        

        // 移入  移出mouseenter    mouseleave
        // 在父盒子上触发,在孩子盒子上不触发
        box.onmouseenter = function(){
            console.log("鼠标移入")
        }

        box.onmouseleave = function(){
            console.log("鼠标移出")
        }
    </script>
</body>
</html>
相关推荐
lyj16899724 分钟前
vue-i18n+vscode+vue 多语言使用
前端·vue.js·vscode
Coding小公仔2 小时前
C++ bitset 模板类
开发语言·c++
小白变怪兽2 小时前
一、react18+项目初始化(vite)
前端·react.js
ai小鬼头2 小时前
AIStarter如何快速部署Stable Diffusion?**新手也能轻松上手的AI绘图
前端·后端·github
小赖同学啊2 小时前
物联网数据安全区块链服务
开发语言·python·区块链
shimly1234562 小时前
bash 脚本比较 100 个程序运行时间,精确到毫秒,脚本
开发语言·chrome·bash
IT_10242 小时前
Spring Boot项目开发实战销售管理系统——数据库设计!
java·开发语言·数据库·spring boot·后端·oracle
墨菲安全3 小时前
NPM组件 betsson 等窃取主机敏感信息
前端·npm·node.js·软件供应链安全·主机信息窃取·npm组件投毒
GISer_Jing3 小时前
Monorepo+Pnpm+Turborepo
前端·javascript·ecmascript