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


相关推荐

  • Android开发:用adb命令安装apk到手机

    Android开发:用adb命令安装apk到手机一、首先需要准备一个apk以及真机(我们以真机为例,就不说明模拟器了),然后adbdevices查看手机是否连接,直接输入adbdevices即可,如图:显示上图信息,说明连接成功,就可以推送安装apk了。如果出现下图,则可参照https://blog.csdn.net/y201314an/article/details/81022556进行修改环境变量…

    2022年4月29日
    146
  • NorthWind 数据库「建议收藏」

    NorthWind 数据库「建议收藏」NorthWind数据库Categories:产品类别;Customers:客户;Employees:雇员EmployeesTerritories:员工涉及领域OrderDetails:订单明细Orders:订单Products:产品Region:地区Shippers:运货商Suppliers:供应商Territories:地域    在NorthWind

    2025年8月24日
    5
  • 将图片保存到系统相冊的两种方法[通俗易懂]

    将图片保存到系统相冊的两种方法

    2022年1月23日
    124
  • pycharm 激活码2021(破解版激活)「建议收藏」

    pycharm 激活码2021(破解版激活),https://javaforall.net/100143.html。详细ieda激活码不妨到全栈程序员必看教程网一起来了解一下吧!

    2022年3月17日
    72
  • EnableEventValidation 是什麽東東?

    EnableEventValidation 是什麽東東?
    回发或回调参数无效。在配置中使用或在页面中使用<%@PageEnableEventValidation="true"%>启用了事件验证。出于安全目的,此功能验证回发或回调事件的参数是否来源于最初呈现这些事件的服务器控件。如果数据有效并且是预期的,则使用ClientScriptManager.RegisterForEventValidation方法来注册回发或回调数据以进行验证。
    说明:执行

    2022年7月26日
    5
  • 基于stm32四轮小车简易PID控制

    基于stm32四轮小车简易PID控制看前需知:作者本人使用的是四个普通的TT电机加编码器+增量式PID,适合PID初学者,但是需要对PID和增量式PID有一定的认知,本篇未有详细介绍,以代码应用为主,大佬勿喷。文章目录一、粗谈PID?二、使用的硬件设备三、软件设计四、关键代码1.TIM1定时器:2.TIM2编码器模式示例:3.电机初始化:4.TIM8PWM输出:5.PID:6.中断服务函数:总结*云中何曾落羽,踏遍三岛寻声*一、粗谈PID?PID在生活中很常见,举个例子。例如生活中,一个加热器需要对某个物体进行恒温控制,但是由于某

    2022年5月27日
    47

发表回复

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

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