JavaScript|JavaScript 鼠标事件(MouseEvent)案例讲解
鼠标事件-MouseEvent
当鼠标进行某种操作时,就会生成一个event对象,该对象记录着鼠标触发事件时的所有属性。
可以通过如下方法在google控制台打印出 MouseEvent 对象。
function mouseDown(e){var e = e||event; console.log(e)}window.onload = function (){ document.getElementsByTagName('body')[0].addEventListener('mousedown',mouseDown,false)}
打印出来的 MouseEvent如下:
文章图片
该对象属性很多,但最常用的 不过 offsetX、offsetY、clientX/clientY、pageX、pageY。各个属性对应的是什么呢?
下面列出一下常用的事件
altkey : 触发鼠标事件时是否alt 按键被按下,如果按下,则返回true,否则返回 fasle。
button:事件属性返回一个阿拉伯数字 , 0代表 按下 左键 ,1 代表按下 滚轮 ,2 代表按下 右键。
offsetX、offsetY :事件属性返回触发事件时 鼠标相对于事件源元素 的X,Y坐标,标准事件没有对应的属性。
clientX、clientY : 事件属性返回当事件被触发时鼠标指针相对于浏览器页面(或客户区)的水平坐标、垂直坐标。
pageX、pageY:事件属性返回当事件被触发时鼠标指针相对于整个页面左上角的水平坐标、垂直坐标。
screenX、screenY:事件属性返回当事件被触发时鼠标位置相对于用户屏幕水水平坐标、垂直坐标,此时的参照点也就是原点是屏幕的左上角。
好吧,文字叙述总归是很烦,上个经典的图,解释一切 :
文章图片
【JavaScript|JavaScript 鼠标事件(MouseEvent)案例讲解】到此这篇关于JavaScript 鼠标事件(MouseEvent)案例讲解的文章就介绍到这了,更多相关JavaScript 鼠标事件(MouseEvent)内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
推荐阅读
- 事件代理
- 事件处理程序
- 数组常用方法一
- Android事件传递源码分析
- 66万奔驰漏油事件看宝宝无理取闹
- 「我的2017」——2017|「我的2017」——2017,大事件盘点
- Quartz|Quartz 源码解析(四) —— QuartzScheduler和Listener事件监听
- 心理工作要不断的评估现实事件对来访者心理造成的影响是什么
- 如何做2020年年度复盘,写出100件成就事件
- 7、前端--jQuery简介、基本选择器、基本筛选器、属性选择器、表单选择器、筛选器方法、节点操作、绑定事件