鼠标事件-MouseEvent

小灰灰 2022-05-14 02:24 215阅读 0赞

当鼠标进行某种操作时，就会生成一个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  如下：

![1164830-20170817161953240-2025930388.jpg][]

该对象属性很多，但最常用的 不过 offsetX、offsetY、clientX/clientY、pageX、pageY。各个属性对应的是什么呢？

下面列出一下常用的事件

altkey ： 触发鼠标事件时是否alt 按键被按下,如果按下，则返回true，否则返回 fasle。

button:  事件属性返回一个阿拉伯数字 ， 0代表 按下 左键 ，1 代表按下 滚轮 ，2 代表按下 右键。

offsetX、offsetY ：事件属性返回触发事件时 鼠标相对于事件源元素 的X,Y坐标，标准事件没有对应的属性。

clientX、clientY ： 事件属性返回当事件被触发时鼠标指针相对于浏览器页面（或客户区）的水平坐标、垂直坐标。

pageX、pageY：事件属性返回当事件被触发时鼠标指针相对于整个页面左上角的水平坐标、垂直坐标。

screenX、screenY：事件属性返回当事件被触发时鼠标位置相对于用户屏幕水水平坐标、垂直坐标，此时的参照点也就是原点是屏幕的左上角。

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

![1164830-20170817165238896-390210847.jpg][]

（完）

[1164830-20170817161953240-2025930388.jpg]: /images/20220514/df5bc3d9a6b24d409b6269eba774836c.png
[1164830-20170817165238896-390210847.jpg]: /images/20220514/dd762e52653b4143a672b27242f5a937.png

发表评论取消回复

表情：

评论列表（有 0 条评论，215人围观）

还没有评论，来说两句吧...

相关阅读

相关 java实用教程——组件及事件处理——MouseEvent事件

MouseEvent事件任何组件上都可以发生鼠标事件，如鼠标进入组件、退出组件、在组件上方单击鼠标、拖动鼠标等都触发鼠标事件，即导致MouseEvent类自动创建一个

本是古典何须时尚/ 2022年09月04日 02:43/ 0 赞/ 769 阅读

相关 SWT之MouseEvent

MouseEvent 对应于的是鼠标事件。它同样包含四个属性： button ， stateMask ， x ， y button 就是说明按下的是哪个键，比如对于普通鼠标来

忘是亡心i/ 2022年07月16日 12:45/ 0 赞/ 172 阅读

相关鼠标滚轮事件

要达到效果是，滚动鼠标到一定距离，导航条出现，没有达到这个高度，滚动条消失鼠标滚轮监听需要用到插件 jquery.mousewheel.min.js v

我就是我/ 2022年06月01日 21:19/ 0 赞/ 642 阅读

相关鼠标跟随事件

<html> <head> <title></title> </head> <body> <script> A=doc

╰半橙微兮°/ 2022年05月18日 00:56/ 0 赞/ 287 阅读

相关鼠标事件事件对象

事件对象：事件在浏览器中是以对象的形式存在的，触发一个事件，就会产生一个事件对象event，该对象包含所有与事件相关的信息，鼠标操作产生的event中会包含鼠标位置的信息，键盘

Dear 丶/ 2022年05月17日 11:46/ 0 赞/ 310 阅读

相关鼠标事件大全

> 一般事件事件浏览器支持描述 > onClick IE3|N2|O3 鼠标点击事件，多用在某个对象控制的范围内的鼠标点击 > > onDblClick IE4|

待我称王封你为后i/ 2022年05月15日 06:43/ 0 赞/ 294 阅读

相关鼠标事件-MouseEvent

当鼠标进行某种操作时，就会生成一个event对象，该对象记录着鼠标触发事件时的所有属性。可以通过如下方法在google控制台打印出 MouseEvent 对象。

小灰灰/ 2022年05月14日 02:24/ 0 赞/ 216 阅读

相关鼠标移动事件

一介绍鼠标移动事件（onmousemove）是鼠标在页面上进行移动时触发事件处理程序，可以在该事件中用document对象实时读取鼠标在页面中的位置。二应用

快来打我*/ 2022年05月12日 00:00/ 0 赞/ 270 阅读

相关 jQuery鼠标事件

今天，我们来讲讲，在jQuery中鼠标事件的方法与应用。在jquery中触发鼠标事件的方法有6种分别是1、click（单击事件），2、dbclick（双击事件），3、mo

悠悠/ 2022年04月24日 06:00/ 0 赞/ 359 阅读

相关鼠标滚轮事件

做一个用鼠标滚轮控制图片放大缩小的简单功能。 1.滚动时页面也会跟随滚动e.preventDefault()去掉默认事件。 2.Chrome、IE等浏览器，用mousewh

迷南。/ 2021年11月02日 02:14/ 0 赞/ 468 阅读