标签：触发 滚轮 鼠标 元素 按下 按钮 13.4 event
| 鼠标事件 | 说明 |
|---|---|
| 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
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。