鼠标事件-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)
上一篇 2022年3月6日 上午11:00
下一篇 2022年3月6日 上午11:00


相关推荐

  • java下载文件或文件夹

    java下载文件或文件夹最近接到一个需求,就是将远程目录下的文件或文件夹下载到指定目录下,下面来看下最后的成果。1.首先,IO流输出文件(可以在浏览器端下载)publicHttpServletResponsedownload(StringfileName,HttpServletResponseresponse){Filefile=newFile(gitConfig.getDestPath()+”/”+fileName);if(file.isDirec

    2022年7月8日
    56
  • navicat 1146错误「建议收藏」

    navicat 1146错误「建议收藏」打开新安装的navicat后,有个test_3306的mysql连接,里面有写默认的mysql、information_schema、sys、performance_schema数据库,我以为这是没用的就删除了,之后建立自己的mysql连接后,打开连接报错1146-Table’historyhistoryperformance_schema.session_status’doesn’texist。查阅资料后了解mysql、information_schema、sys、performance_s

    2022年6月7日
    186
  • Android 系统签名实现的三种方式

    Android 系统签名实现的三种方式在项目开发时,如果需要使应用具有系统权限,例如可以支持静默安装和卸载APK,此时就需要使用系统签名。常用的系统签名方式包括在ubuntu环境下、手动签名和在AndroidStudio环境配置,三种方式中,实现最简单的是通过AndroidStudo方式,该方式的签名实现与正常的APK签名相同,唯一不同的就是签名文件是通过系统生成的。注意,无论采用何种签名方式,如果想实现具有系统权限的应用,在AP…

    2022年6月21日
    25
  • 估值1200亿,Kimi融资破纪录了

    估值1200亿,Kimi融资破纪录了

    2026年3月15日
    2
  • 360浏览器怎么设置截图快捷键_谷歌浏览器截图快捷键ctrl加什么

    360浏览器怎么设置截图快捷键_谷歌浏览器截图快捷键ctrl加什么360截图支持网页截图,前提是你要打开360浏览器,打开后,不管是什么界面都可以截图。一旦关闭,便不能使用。但是默认的360快捷键(ctrl+shift+X)可能与系统其他功能快捷键冲突,所以本文主

    2022年8月5日
    11
  • PyCharm更新pip问题

    PyCharm更新pip问题在 pycharm 中创建一个新的虚拟环境 发现 pip 等级过低 pip V 使用正常的 pip 升级命令 python mpipinstallu 报如下错误解决办法 easy install Upip

    2026年3月26日
    2

发表回复

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

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