鼠标事件-MouseEvent

小灰灰 2022-05-14 02:24 266阅读 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 条评论，266人围观）

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

相关阅读

相关 js的鼠标事件（JavaScript的鼠标事件，vue的鼠标事件）

js鼠标事件，相关属性： var div = document.getElementById("box") // 1、单击事件

╰+哭是因爲堅強的太久メ/ 2023年10月02日 23:49/ 0 赞/ 5 阅读

相关鼠标事件

1.移动、点击 <Grid> <Grid.RowDefinitions> <RowDefinition></R

小灰灰/ 2023年08月17日 16:53/ 0 赞/ 115 阅读

相关鼠标事件

–鼠标事件 click：单击 dbclick：双击 mousedown：用户按下任何鼠标按钮触发；冒泡 mouseup：用户释放鼠标按钮时触发；冒泡 mous

太过爱你忘了你带给我的痛/ 2023年07月13日 15:11/ 0 赞/ 87 阅读

相关鼠标事件

由鼠标事件（MouseEvent）可以发现：其中包含了许多的坐标，且每个坐标的含义都不一样。下面我们来挨个介绍常用的坐标，以及它们的含义。一、clientX、clie

╰+哭是因爲堅強的太久メ/ 2023年02月21日 06:12/ 0 赞/ 68 阅读

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

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

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

相关 SWT之MouseEvent

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

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

相关鼠标滚轮事件

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

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

相关鼠标跟随事件

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

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

相关鼠标事件事件对象

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

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

相关鼠标事件-MouseEvent

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

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