鼠标事件-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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • pycharm import cv2找不到指定模块_pycharm显示主菜单

    pycharm import cv2找不到指定模块_pycharm显示主菜单首先,我们是要导入opencv(cv2)包,那么这个包是不是必须就在我们这个文件夹下面才行?我认为必须是这样。所以,我们在cmd用pipinstall命令安装,也必须在这个文件夹下执行,并且放到pip.exe一起,我们从opencv官网下好的whl文件也应该放在python/scripts这个里面。在cmd里这样执行,就可以,根据自己的文件夹来,命令仅提供参考:cdC:\Users\YZTang\PycharmProjects\rk-pro\venv\Scriptspipinsta.

    2022年8月27日
  • HikariPool-1 – Thread starvation or clock leap detected与Hikari数据源配置

    HikariPool-1 – Thread starvation or clock leap detected与Hikari数据源配置2019-12-0412:10:51.494WARN14480—[l-1housekeeper]com.zaxxer.hikari.pool.HikariPool:HikariPool-1-Threadstarvationorclockleapdetected(housekeeperdelta=7m48s317ms362µs591ns)….

    2022年6月23日
  • python—whl文件介绍与安装

    python—whl文件介绍与安装在安装whl文件之前,我们需要先搞清楚什么是whl文件,whl格式本质上是一个压缩包,里面包含了py文件,以及经过编译的pyd文件。使得可以在不具备编译环境的情况下,选择合适自己的python环境进行安装。在Win7下安装whl文件,可以直接使用pip命令:pipinstallMySQL_python-1.2.5-cp36-none-win32.whl(1)虽然大多数情况下,…

    2022年5月30日
  • Linux服务器部署vue项目[通俗易懂]

    Linux服务器部署vue项目[通俗易懂]最近刚到新公司,正好之前没接触过这方面的东西。最初仅仅是猜想。最后也没想到Tomcat真的可以部署前端页面好,我先来。新建一个vue项目。//详细的怎么创建。我这里就不说了。vueinitwebpackvuetest得到的项目目录执行,npmrunbuild//进行打包操作当最后看到这样代表打包成功此时你可连接服务器。我这里用…

    2022年6月18日
  • 使用java代码来打印杨辉三角形图案

    使用java代码来打印杨辉三角形图案

    2021年5月24日
  • C语言实现一个关机程序

    C语言实现一个关机程序#define_CRT_SECURE_NO_WARNINGS#include<stdio.h>#include<stdlib.h>//system()#include<string.h>//strcmp()#include<windows.h>//shutdownintmain(){ charinput[20]={0}; //一个关机程序 //shutdown-s关机 //shutdown-s-t60设计关.

    2022年7月22日

发表回复

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

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