js的鼠标点击事件

最新推荐文章于 2024-06-28 13:55:12 发布

进阶的小牛

最新推荐文章于 2024-06-28 13:55:12 发布

阅读量875

点赞数

分类专栏：零散点小结

本文链接：https://blog.csdn.net/datuzidppd5556/article/details/98660837

版权

零散点小结专栏收录该内容

20 篇文章 0 订阅

订阅专栏

鼠标点击事件小结：

onclick：点击事件
ondblclick：双击事件（必然会触发单击事件）；
onmouseover：鼠标移入；
onmouseout：鼠标移出；
onmouseenter：鼠标移入；
onmouseleave：鼠标移出；
onmousemove：鼠标在元素中移动；
onmousedown：鼠标按下；
onmouseup：鼠标抬起；
oncontextmenu：鼠标右键事件；

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .bigbox {
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        .box {
            width: 100px;
            height: 100px;
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <div class="bigbox" id="bigbox">
        <div class="box" id="box"></div>
    </div>
    <script>
        var btn = document.getElementById("bigbox");
        btn.onclick = function () {
            console.log("onclick");
        }

        // 子元素也会触发事件，多次触发
        btn.onmouseover = function () {
            console.log("over");
        }
        btn.onmouseout = function () {
            console.log("out");
        }

        // 只会触发一次事件，子元素不会触发事件
        btn.onmouseenter = function () {
            console.log("enter");
        }
        btn.onmouseleave = function () {
            console.log("leave");
        }

        // 双击事件
        btn.ondblclick = function () {
            console.log("dblclick");
        }

        // 鼠标在元素中移动
        btn.onmousemove = function () {
            console.log("move");
        }

        // 鼠标按下
        btn.onmousedown = function () {
            console.log("down");
        }

        // 鼠标抬起
        btn.onmouseup = function () {
            console.log("up");
        }

        // 右键菜单
        btn.oncontextmenu= function () {
            console.log("右键");
        }
    </script>
</body>

</html>