鼠标事件-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  如下:

鼠标事件-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:事件属性返回当事件被触发时鼠标位置相对于用户屏幕水水平坐标、垂直坐标,此时的参照点也就是原点是屏幕的左上角。

好吧,文字叙述总归是很烦,上个经典的图,解释一切 :

鼠标事件-MouseEvent

 

(完)

 

 

 

转载于:https://www.cnblogs.com/hanguozhi/p/7382719.html

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/108229.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • dirsearch无法在windows使用_没有windowssearch怎么办

    dirsearch无法在windows使用_没有windowssearch怎么办windows下dirsearch安装一、dirsearch下载二、安装setup.py1.把解压出来的文件放入python文件中,其他地方我试过安装不了setup.py2、然后使用dos命令进入到该文件夹3、安装setup.py4、之后就可以开始使用了dirsearch下载地址,建议还是自己操作一遍,增强印象。一、dirsearch下载1、首先打开GitHub搜索dirsearch,我这里之前搜过,有记录。然后在下载二、安装setup.py1.把解压出来的文件放入python文件中,其他地方

    2022年10月5日
    4
  • CryptoJS简单使用

    CryptoJS简单使用转自CryptoJS简单使用CryptoJS简单使用.简单看下几种加密和哈希函数.

    2025年7月22日
    5
  • mysql和redis的区别

    mysql和redis的区别1.mysql和redis的数据库类型mysql是关系型数据库,主要用于存放持久化数据,将数据存储在硬盘中,读取速度较慢。redis是NOSQL,即非关系型数据库,也是缓存数据库,即将数据存储在缓存中,缓存的读取速度快,能够大大的提高运行效率,但是保存时间有限2.mysql的运行机制mysql作为持久化存储的关系型数据库,相对薄弱的地方在于每次请求访问数据库时,都存在着I/O操作,如果反复…

    2022年6月14日
    42
  • python的for循环是什么循环_while循环的用法举例

    python的for循环是什么循环_while循环的用法举例在本篇博客中,我们将讨论Python中for循环的原理。我们将从一组基本例子和它的语法开始,还将讨论与for循环关联的else代码块的用处。然后我们将介绍迭代对象、迭代器和迭代器协议,还会学习如何创建自己的迭代对象和迭代器。之后,我们将讨论如何使用迭代对象和迭代器实现for循环,以及利用while循环通过迭代器协议实现for循环逻辑。最后,我们将反编译一…

    2022年8月12日
    8
  • 前端技术周刊 2018-06-09:网络协议栈[通俗易懂]

    前端技术周刊 2018-06-09:网络协议栈

    2022年4月3日
    53
  • 【Custom Mutator Fuzz】Libprotobuf + AFLapp Custom Mutator[通俗易懂]

    【Custom Mutator Fuzz】Libprotobuf + AFLapp Custom Mutator[通俗易懂]这篇文章主要是在libprotobuf-mutator_fuzzing_learning开源模糊测试练习项目第4个练习的基础上进行详细讲解,主要内容为通过libprotobuf-mutator为AFL++提供自定义protobuf结构突变。练习和写作的过程中也是踩了不少的坑,文章末尾会有我遇到的全部问题及解决办法

    2025年11月8日
    5

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号