鼠标事件

事件类型

click：用户单击主鼠标按钮（一般是左键）或者按下在聚焦时按下回车键时触发
dblclick：用户双击主鼠标按键触发（频率取决于系统配置）
mousedown：用户按下鼠标任意按键时触发
mouseup：用户抬起鼠标任意按键时触发
mousemove：鼠标在元素上移动时触发
mouseover：鼠标进入元素时触发
mouseout：鼠标离开元素时触发
mouseenter：鼠标进入元素时触发，该事件不会冒泡
mouseleave：鼠标离开元素时触发，该事件不会冒泡

区别：

over和out，不考虑子元素，从父元素移动到子元素，对于父元素而言，仍然算作离开
enter和leave，考虑子元素，子元素仍然是父元素的一部分
mouseenter和mouseleave不会冒泡

事件对象

所有的鼠标事件，事件处理程序中的事件对象，都为 MouseEvent

altKey：触发事件时，是否按下了键盘的alt键
ctrlKey：触发事件时，是否按下了键盘的ctrl键
shiftKey：触发事件时，是否按下了键盘的shift键
button：触发事件时，鼠标按键类型
- 0：左键
- 1：中键
- 2：右键

位置：

page：pageX、pageY，当前鼠标距离页面(包含隐藏的部分)的横纵坐标
client: clientX、clientY，鼠标相对于视口的坐标
offset：offsetX、offsetY，鼠标相对于事件源的内边距的坐标
screen: screenX、screenY，鼠标相对于屏幕
x、y，等同于clientX、clientY
movement：movementX、movementY，只在鼠标移动事件中有效，相对于上一次鼠标位置，偏移的距离

实践--拖拽效果

html

<!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>
        div {
            width: 200px;
            height: 200px;
            border-radius: 50%;
            background: rgb(247, 93, 93);
            cursor: move;
            position: absolute;
            left: 100px;
            top: 100px;
        }

        p {
            width: 100px;
            height: 100px;
            background: lightblue;
        }
    </style>
</head>

<body>
    <div>
        <!-- <p></p> -->
    </div>

    <script>
        var div = document.querySelector("div");
        div.onmousedown = function(e) {
            if (e.button !== 0) { //如果不是鼠标左键
                return;
            }
            var pageX = e.pageX;
            var pageY = e.pageY;
            var style = getComputedStyle(div);
            var divLeft = parseFloat(style.left);
            var divTop = parseFloat(style.top);
            window.onmousemove = function(e) {
                var disX = e.pageX - pageX;
                var disY = e.pageY - pageY;
                div.style.left = divLeft + disX + "px";
                div.style.top = divTop + disY + "px";
            }
            window.onmouseup = window.onmouseleave = function(e) {
                if (e.button === 0) {
                    window.onmousemove = null; //移除鼠标移动事件
                }
            }
        }

        // var div = document.querySelector("div");
        // var style = getComputedStyle(div);
        // var divLeft = parseFloat(style.left);
        // var divTop = parseFloat(style.top);
        // div.onmousedown = function(e) {
        //     if (e.button !== 0) { //如果不是鼠标左键
        //         return;
        //     }
        //     window.onmousemove = function(e) {
        //         divLeft += e.movementX;
        //         divTop += e.movementY;
        //         div.style.left = divLeft + "px";
        //         div.style.top = divTop + "px";
        //     }
        //     window.onmouseup = window.onmouseleave = function(e) {
        //         if (e.button === 0) {
        //             window.onmousemove = null; //移除鼠标移动事件
        //         }
        //     }
        // }
    </script>
</body>

</html>

鼠标事件 ​

事件类型 ​

事件对象 ​

实践--拖拽效果 ​

鼠标事件

事件类型

事件对象

实践--拖拽效果