解析鼠标事件

鼠标事件

鼠标事件是 Web 开发中最常用的事件类型

---

---

一、如何触发鼠标事件

向 HTML 元素分配事件，您能够使用事件属性

<button id="btn">haha</button>
<script>
var btn = document.getElementById('btn')
btn.(事件) = function(){}
</script>

二、使用步骤

1.添加事件

代码如下（示例）：

btn.onclick = function () {
        console.log('鼠标点击事件');
        }
        btn.onmousedown = function () {
        console.log('鼠标上的按钮被按下了');
        }
        btn.onmouseup = function () {
        console.log('鼠标按下后，松开时激发的事件')
        }
        btn.onmouseover = function () {
        console.log('当鼠标移动到某对象范围的上方时触发的事件');
        }
        btn.onmousemove = function () {
        console.log('鼠标移动时触发的事件');
        }
        btn.onmouseout = function () {
        console.log('当鼠标离开某对象范围时触发的事件');
        }
        btn.onmouseleave = function () {
        console.log('鼠标离开一个节点时触发，离开父节点不会触发这个事件');
        }

2.事件顺序

代码如下（示例）：

// 事件比较
        // mouseout事件和mouseleave事件，都是鼠标离开一个节点时触发。
        // 两者的区别是：
        // 在父元素内部离开一个子元素时，mouseleave事件不会触发，而mouseout事件会触发。

        //     当有多个事件被触发时， 它们的顺序为：
        //     列如： click（ 鼠标左键（ 或中键） 被单击）
        //     事件触发顺序是： mousedown - > mouseup - > click
        //     dblclick（ 鼠标左键（ 或中键） 被双击）
        //     事件触发顺序是： mousedown - > mouseup - > click - > mousedown - > mouseup - > click - > dblclick

三.鼠标定位

1.定位需求

代码如下（示例）：

属性	说明
clientX	以浏览器窗口左上顶角为原点，定位 x 轴坐标
clientY	以浏览器窗口左上顶角为原点，定位 y 轴坐标
offsetX	以当前事件的目标对象左上顶角为原点，定位 x 轴坐标
offsetY	以当前事件的目标对象左上顶角为原点，定位 y 轴坐标
pageX	以 document 对象（即文档窗口）左上顶角为原点，定位 x 轴坐标
pageY	以 document 对象（即文档窗口）左上顶角为原点，定位 y 轴坐标
screenX	计算机屏幕左上顶角为原点，定位 x 轴坐标
screenY	计算机屏幕左上顶角为原点，定位 y 轴坐标
layerX	最近的绝对定位的父元素（如果没有，则为 document 对象）左上顶角为元素，定位 x 轴坐标
layerY	最近的绝对定位的父元素（如果没有，则为 document 对象）左上顶角为元素，定位 y 轴坐标

2.找到鼠标在页面的位置

代码如下（示例）：

<div id="box" ></div>
<script>
    // 初始化拖放对象
    var box = document.getElementById("box");
    // 获取页面中被拖放元素的引用指针
    box.style.position = "absolute";  // 绝对定位
    box.style.width = "160px";  // 定义宽度
    box.style.height = "120px";  // 定义高度
    box.style.backgroundColor = "red";  // 定义背景色
    // 初始化变量，标准化事件对象
    var mx, my, ox, oy;  // 定义备用变量
    function e(event){  // 定义事件对象标准化函数
        if( ! event){  // 兼容IE浏览器
            event = window.event;
            event.target = event.srcElement;
            event.layerX = event.offsetX;
            event.layerY = event.offsetY;
        }
        event.mx = event.pageX || event.clientX + document.body.scrollLeft;
        // 计算鼠标指针的x轴距离
        event.my = event.pageY || event.clientY + document.body.scrollTop;
        // 计算鼠标指针的y轴距离
        return event;  // 返回标准化的事件对象
    }
     // 定义鼠标事件处理函数
    document.onmousedown = function(event){  // 按下鼠标时，初始化处理
        event = e(event);  // 获取标准事件对象
        o = event.target;  // 获取当前拖放的元素
        ox = parseInt(o.offsetLeft);  // 拖放元素的x轴坐标
        oy = parseInt(o.offsetTop);  // 拖放元素的y轴坐标
        mx = event.mx;  // 按下鼠标指针的x轴坐标
        my = event.my;  // 按下鼠标指针的y轴坐标
        document.onmousemove = move;  // 注册鼠标移动事件处理函数
        document.onmouseup = stop;  // 注册松开鼠标事件处理函数
    }
    function move(event){  // 鼠标移动处理函数
        event = e(event);
        o.style.left = ox + event.mx - mx  + "px";  // 定义拖动元素的x轴距离
        o.style.top = oy + event.my - my + "px";  // 定义拖动元素的y轴距离
    }
    function stop(event){  // 松开鼠标处理函数
       event = e(event);
       ox = parseInt(o.offsetLeft);  // 记录拖放元素的x轴坐标
       oy = parseInt(o.offsetTop);  // 记录拖放元素的y轴坐标
       mx = event.mx ;  // 记录鼠标指针的x轴坐标
       my = event.my ;  // 记录鼠标指针的y轴坐标
       o = document.onmousemove = document.onmouseup = null;
       // 释放所有操作对象
    }
</script>