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

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

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

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • linux虚拟机怎么配置网卡和ip地址_添加虚拟ip

    linux虚拟机怎么配置网卡和ip地址_添加虚拟ip虚拟ip作用:配置虚拟ip也就是说一个网卡有多个ip地址,更方便多个网段之间进行测试使用!缺点是当网卡坏掉之后基于这个网卡的所有虚拟网卡都会失效!!!步骤如下:1、查看内网ip地址[root@51~]#ifconfigens33:flags=4163<UP,BROADCAST,RUNNING,MULTICAST>mtu1500inet10.10.14.51netmask255.255.255.0broadcast10.10.14.255

    2022年10月20日
  • tomcat启动时乱码(tomcat打开是乱码)

    一、乱码图示二、解决方案1.进入安装路径下的conf文件夹>>找到logging.properties使用记事本打开2.找出图中的代码,将其修改为java.util.logging.ConsoleHandler.encoding=GBK三、验证是否解决问题进入命令行窗口,输入startup.bat运行乱码问题解决…

  • 电路实习报告:简易收音机的焊接

    电路实习报告:简易收音机的焊接本文是本科生电路实习(焊接部分)的实习报告

    2022年10月24日
  • linux修改文件名字_linux搜索文件名命令

    linux修改文件名字_linux搜索文件名命令在Linux环境下修改文件名可以有不同的命令方式,比如rename、mv都可以进行修改,如果用户正在了解这方面的知识,可以阅读下文了解Linux修改文件名以及批量修改文件名的方法。对于单个的文件,可以直接使用命令,那如果有大量的类似格式的文件名需要修改成其他格式的,该如何呢?比如某次测试后,保存的文件为Lan1.txt,Lan2.txt,……Lan100.txt这一百个文件需要在前面添加前缀变成…

    2022年10月24日
  • SpringCloud(十一)—-Gateway的名词解释以及流程解析

    SpringCloud(十一)—-Gateway的名词解释以及流程解析

    2020年11月12日
  • java实习生面试题_java实习生面试题.doc

    java实习生面试题[标签:标题]实习生在面试Java岗位时,做好面试准备很重要,那么你了解面试题目了吗?下面阳光网小编已经为你们整理了java实习生面试题,希望可以帮到你。java实习生面试题11.Java有那些基本数据类型,String是不是基本数据类型,他们有何区别。Java语言提供了八种基本类型:六种数字类型(四个整数型,两个浮点型)字节型byte8位短整型short16位整型in…

发表回复

您的电子邮箱地址不会被公开。

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