了解js鼠标事件对象几个位置的概念

今天呢, 我们讲解一下js的鼠标事件

说到鼠标事件, 其实我们经常会使用到, 比如点击, 双击等等, 比如摄像头控制台的移入、按下、松开等等, 比如滚轮移动, 相比大家对于这种场景并不陌生, 所以, 我们今天主要说一下, 几个比较关键的概念

我们先来实现一下事件的注册, 需要一个鼠标事件名, 当我们事件发生之后, 就会触发一个回调函数, 函数有一个参数, 这个事件参数就是鼠标事件对象

图片

相比click来说还有很多鼠标相关的事件, 比如: mousemove, mousedown, mouseup等等

当我们触发相关事件, 返回的事件对象e, 我们看看大体的样子

图片

会返回很多很多信息, 我们主要说一下鼠标的位置信息

先说鼠标位置相关的属性

clientX, 这个属性是做什么的, 其实它表示的是鼠标触发事件的位置到视口左边的位置, 如果是Y, 就是到视口顶部的距离

pageX, 这个属性表示鼠标位置到整个页面最左边的距离

movementX, 这个属性表示这一次鼠标事件的触发, 距离上一次鼠标事件的触发, 鼠标在横向上移动的距离

关于鼠标事件的位置, 今天, 我们就先讲解到这里

我们下期见

声明:文中观点不代表本站立场。本文传送门:https://eyangzhen.com/413847.html

(0)
联系我们
联系我们
分享本页
返回顶部