MouseEvent事件

棉花709

已于 2024-08-27 19:06:20 修改

阅读量639

点赞数 5

文章标签： javascript 开发语言 ecmascript

于 2024-08-27 15:35:43 首次发布

本文链接：https://blog.csdn.net/qq_64389127/article/details/141598399

版权

一、MouseEvent的一些属性

1、当鼠标事件触发时，同时按下对应的键

altKey:false
ctrlKey:false
metaKey:false MAC command
shiftKey:false

2、当使用mousedown，mouseup事件触发时，按下了哪个键

左中右
button: 0 1 2
buttons:1 3 2
which: 1 2 3

3、用于滚轮滚动触发滚动距离

detail:1

4、失焦聚焦时，上一次触发的元素

relatedTarget:null

5、鼠标点击相对视口的坐标相对

clientX:519
clientY:112
x:519
y:112

6、鼠标点击相对页面左上角距离绝对

pageX:519
pageY:112

7、相对屏幕左上角距离

screenX:519
screenY:200

8、mousemove事件相对上次移动位置的偏移值

movementX:0
movementY:0

9、父子容器定位的相对位置

如果父子容器定位，都是相对e.target这个目标对象的左上角距离

如果子元素没有定位，layerX、layerY则向上查找定位的父元素，

如果没有找到则相对html左上角定位，

如果找到父元素定位了，则相对父元素左上角距离

而offsetX和offsetY一直是相对e.target(鼠标点击)这个目标对象的左上角距离

layerX:519
layerY:112
offsetX:520
offsetY:112

二、MouseEvent事件分类

        var div1 = document.querySelector('.div1');
        div1.addEventListener('mousedown', mouseHandler);
        // div1.addEventListener('mouseup',mouseHandler);
        // div1.addEventListener('click',mouseHandler);
        // div1.addEventListener('mousemove',mouseHandler);
        // div1.addEventListener('dblclick',mouseHandler);
        div1.addEventListener('contextmanu', mouseHandler);
        // div1.addEventListener('mouseover',mouseHandler);
        // div1.addEventListener('mouseout',mouseHandler);
        // div1.addEventListener('mouseenter',mouseHandler);
        // div1.addEventListener('mouseleave',mouseHandler);
        function mouseHandler(e) {
            // console.log(e)
            console.log(e.type);
            if (e.type === "mousedown") {
                // 当有文本时，使用阻止默认行为可以禁止选中文本
                e.preventDefault();
            } else if (e.type === "contextmenu") {
                e.preventDefault();
            }

        }

        // document.addEventListener('mousedown', clickHandler);
        // function clickHandler(e) {
        //     console.log(e);
        // }