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