前端鼠标事件

最新推荐文章于 2025-07-17 18:35:20 发布

原创最新推荐文章于 2025-07-17 18:35:20 发布 · 315 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

回顾专栏收录该内容

6 篇文章

订阅专栏

本文主要探讨JavaScript中的鼠标事件，包括点击、移动、拖放等重要事件类型，以及如何在前端开发中有效利用这些事件来增强用户体验。

回顾

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            border: 2px solid black;
        }
    </style>
</head>
<body>
    <div class="box">
        一个盒子
    </div>
    <script>
        // onclick : 事件处理函数， click：事件名称
        // 鼠标事件：
        // click 单击
        // dblclick 双击
        // mouseover 鼠标经过（当前的那个对象）
        // mouseout 鼠标离开（当前的那个对象）
        // mousedown 鼠标按下
        // mouseup 鼠标释放
        // mousemove 鼠标移动
        // oncontextmenu 鼠标右键单击

        // mouseenter 鼠标经过(范围)
        // mouseleave 鼠标离开(范围)

        var mybox = document.querySelector(".box")
        // mybox.onclick = function(){
        //     this.style.backgroundColor = "red"
        // }
        // mybox.ondblclick = function(){
        //     this.style.backgroundColor = "red"
        // }
        mybox.onmouseover = function(){
            this.style.backgroundColor = "red"
        }
        mybox.onmouseout = function(){
            this.style.backgroundColor = "blue"
        }
        mybox.onmousedown = function(){
            this.style.backgroundColor = "yellow"
            this.style.border = "5px dashed orange"
        }
        mybox.onmouseup = function(){
            this.style.border = "5px dotted pink"
        }
        // 抚摸
        mybox.onmousemove = function(){
            console.log('ok');
        }

        document.oncontextmenu = function(){
            alert("你鼠标右键单击了")
        }


    </script>
</body>
</html>