js DOM : 鼠标事件

任何事件都有有一个事件对象，该对象作为事件函数的第一个参数

 

鼠标进入事件 ：onmouseover 、onmouseenter

鼠标移出事件 ：onmouseout 、onmouseleave 

鼠标移动事件 ：onmousemove

事件绑定

var layer = document.getElementById('layer');
// 鼠标坐标是相对于layer元素的
// 鼠标进入事件
layer.onmouseenter = function (e) {
    // e : 事件对象

    // 获取鼠标进入时的坐标
    var x = e.offsetX; // 横坐标
    var y = e.offsetY; // 纵坐标
}
// 鼠标移动事件
layer.onmousemove = function (e) {
    // 获取鼠标移动时的坐标
    var x = e.offsetX;
    var y = e.offsetY;
    conole.log('鼠标移动啦');
}
// 鼠标离开事件
layer.onmouseleave = function (e) {
    console.log('鼠标离开');
}

鼠标点击事件

鼠标按下事件：onmousedown

// 鼠标按下事件
var circle = document.querySelector('.circlr');

circle.onmousedown = function (e) {
    // 获取鼠标按下时鼠标的坐标
    var x = e.offsetX;
    var y = e.offsetY;
    // 鼠标按下移动时触发鼠标移动事件，实现点击拖动效果
    circle.onmouemove = function (event) {
        // 获取鼠标移动时的坐标
        var x = event.offsetX;
        var y = event.offsetY;
    }
}

鼠标松开事件：onmouseup

circle.onmouseup = function () {
    // 鼠标松开时清除鼠标移动事件
    circle.onmousemove = null;
}

鼠标按键键码事件：左键 : 0 、中键（按击滚轮）:  1、右键 :  2

document.onmousedown = function (e) {
    console.log(e.button);
    //  鼠标左键点击输出 0 ;
    //  鼠标中键（按下滚轮）点击输出 1 ;
    //  鼠标右键点击输出 2 ;
}

禁止鼠标右键菜单

document.oncontextmenu = function () {
    // 禁止右键菜单
    return false;
}

双击事件：每一次单击时间不能超过350ms    ==>  元素.ondbclick = function () {}

// 文档页面双击
document.ondbclick = function () {
    console.log("鼠标双击啦！");
}