其他分享
首页 > 其他分享> > 13.4.3 鼠标与滚轮事件

13.4.3 鼠标与滚轮事件

作者:互联网

鼠标事件 说明
click 单击或按下回车键时触发
dbclick 双击鼠标按钮时触发
mousedown 按下鼠标按钮时触发,不能通过键盘触发
mouseenter 鼠标光标从元素外部首次移动到元素范围之内时触发,不冒泡,且移动到后代元素上不触发
mouseleave 位于元素上方的鼠标光标移动到元素范围之外时触发,不冒泡,且移动到后代元素上不触发
mousemove 鼠标指针在元素内部移动时重复触发,不能通过键盘触发
mouseout 鼠标指针位于一个元素上方,用户将其移入另一个元素时触发,又移入的另一个元素可能位于前一个元素的外部,也可能是这个元素的子元素,不能通过键盘触发
mouseover 鼠标指针位于一个元素外部,用户将其首次移入另一个元素边界之内时触发,不能通过键盘触发
mouseup 释放鼠标按钮时触发,不能通过键盘触发

页面上所有元素都支持鼠标事件,除 mouseenter 和 mouseleave 外,所有鼠标事件都会冒泡

一、坐标位置

用于判断事件发生时鼠标的位置,有三种位置信息

var div = document.getElementById('myDiv');
EventUtil.addHandler(div,'click',function(event) {
    event = EventUtil.getEvent(event);
    console.log('client coordinates:' + event.clientX + ',' + event.clientY);
    //视口位置,相对于浏览器的位置,不包含滚动
    console.log('page coordinates:' + event.pageX + ',' + event.pageY);
    //页面位置,相对于页面的位置,包含滚动
    console.log('screen coordinates:' + event.screenX + ',' + event.screenY);
    //屏幕位置,相对于整个屏幕
});

二、修改键

用于判断事件发生时是否同时按下了某些键,包含四个键,对应的属性为:
shiftKey、ctrlKey、altKey、metaKey(windows 中为 Windows 键,苹果中为 Cmd 键)
属性值为布尔值,按下为 true,否则为 false

var div = document.getElementById('myDiv');
EventUtil.addHandler(div,'click',function(event) {
    event = EventUtil.getEvent(event);
    var keys = new Array();
    if(event.shiftKey) {
        keys.push('shift');
    }
    if(event.ctrlKey) {
        keys.push('ctrl');
    }
    if(event.altKey) {
        keys.push('alt');
    }
    if(event.metaKey) {
        keys.push('meta');
    }
    alert('keys:' + keys.join(','));
});

三、相关元素

对于 mouseout 和 mouseover 两个事件,其除涉及到自身元素之外,还会涉及到其他元素,因为其本质是从一个元素边界移动到另一个元素边界,涉及到的另外的元素即为相关元素,使用 event.relatedTarget 属性可获知
对于 mouseout,失去光标的元素为主目标元素,获得光标的元素为相关元素,IE8之前使用 event.toElement 表示
对于 mouseover,获得光标的元素为主目标元素,失去光标的元素为相关元素,IE8之前使用 event.fromElement 表示
对于其他事件,event.relatedTarget 的值为 null

四、鼠标按钮

对于 mousedown 和 mouseup,event 对象中会保存一个 button 属性,表示按下的是哪个鼠标按钮,一般而言,0表示主鼠标按钮(多为左侧),1表示中间按钮(多为滚轮),2表示次鼠标按钮(多为右侧)
IE8及之前版本的取值更为复杂

取值 说明
0 没有按下按钮
1 按下了主鼠标按钮
2 按下了次鼠标按钮
3 同时按下了主、次鼠标按钮
4 按下了中间鼠标按钮
5 同时按下了主鼠标按钮和中间鼠标按钮
6 同时按下了次鼠标按钮和中间鼠标按钮
7 同时按下了三个鼠标按钮

使用时,多将 IE 模型规范化为 DOM 方式,使用 document.implementation.hasFeature(‘MouseEvents’,‘2.0’) 来检测类型

var EventUtil = {
    //其他代码
    getButton: function(event) {
        if(document.implementation.hasFeature('MouseEvents','2.0')) {
            return event.button;
        } else {
            switch(event.button) {
                case 0:
                case 1:
                case 3:
                case 5:
                case 7:
                    return 0;
                case 2:
                case 6:
                    return 2;
                case 4:
                    return 1;
            }
        }
    }
};

五、更多的事件信息

对于鼠标事件,detail 属性中包含一个数值,表示单击的次数,从1开始计数,单击之后进行递增,如果鼠标在 mousedown 和 mouseup 之间移动了位置,detail 置零
IE 也有一些属性,shiftLeft、altLeft、ctrlLeft 对应于shiftKey、altKey、ctrlKey,offsetX、offsetY表示光标相对于目标元素的 x/y 坐标,但是IE 提供的属性用处不大

六、鼠标滚轮事件

mousewheel 事件,可以在任何元素上触发,最终会冒泡到 document(IE8)或 window(其他)对象
其 event 对象包含一个 event.wheelDelta 属性,用于表示滚轮增量,向前(上)滚动时,值为120的倍数,向后滚动时,值为-120的倍数
Opera9.5之前的版本中,wheelDelta 值的正负号是颠倒的
Firefox 支持一个名为 DOMMouseScroll 的类似事件,有关鼠标滚轮的信息保存在 detail 属性中,向前滚动时,值为-3的倍数,向后滚动时,值为3的倍数

var EventUtil = {
    //其他代码
    getWheelDelta: function(event) {
        if(event.wheelDelta) {
            return (client.engine.opera && client.engine.opera < 9.5 ? -event.wheelDelta : event.wheelDelta);
        } else {
            return -event.detail * 40;
        }
    }
};

七、触摸设备

在面向 iPhone 和 iPod 中的 Safari 开发时,需记住以下几点:
不支持 dbclick 事件,双击浏览器窗口会放大页面,而且没有办法改变该行为
轻击可单击元素会触发 mousemove 事件,如果此操作会导致内容变化,将不再有其他事件发生;否则会依次触发 mousedown、mouseup、click 事件。轻击不可单击元素不会触发任何事件。可单击元素指单击可产生默认操作的元素(如链接),或指定了onclick 事件处理程序的元素
mousemove 事件会触发 mouseover 和 mouseout 事件
两个手指放在屏幕上且页面随手指移动而滚动时会触发 mousewheel 和 scroll 事件

糖小昔 发布了57 篇原创文章 · 获赞 0 · 访问量 859 私信 关注

标签:触发,滚轮,鼠标,元素,按下,按钮,13.4,event
来源: https://blog.csdn.net/weixin_44774877/article/details/104115776