本文主要介绍JavaScript MouseEvent的案例讲解。本文通过一个简单的案例来说明对这项技术的理解和使用。以下是详细内容，有需要的朋友可以参考一下。

鼠标事件-MouseEvent

鼠标做一件事，会生成一个事件对象，记录鼠标触发事件时的所有属性。

您可以通过以下方式在google控制台中打印MouseEvent对象。

函数鼠标按下(e){

var e=e | |事件；

console.log(e)

}

window.onload=function (){

document . getelementsbytagname(' body ')[0]。addEventListener('mousedown '，mousedown，false)

}

打印的MouseEvent如下所示：

这个对象的属性有很多，但是最常用的有offsetX、offsetY、clientX/clientY、pageX和pageY。对应的属性是什么？

以下是常见事件的列表。

Altkey:鼠标事件触发时是否按下alt键，如果是，则返回true，否则返回fasle。

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

Offx，offsetX:当事件被触发时，事件属性返回鼠标相对于事件源元素的X，Y坐标。标准事件没有相应的属性。

ClientX，clientY:事件属性返回触发事件时鼠标指针相对于浏览器页面(或客户区)的水平和垂直坐标。

PageX，pageY:事件属性返回事件触发时鼠标指针相对于整个页面左上角的水平和垂直坐标。

ScreenX，screenY:事件属性返回事件触发时鼠标位置相对于用户屏幕的水平和垂直坐标，参考点即原点为屏幕左上角。

嗯，叙述总是很烦人。最后一张经典图片说明了一切：

本文关于JavaScript MouseEvent案例的解释到此为止。有关JavaScript MouseEvent的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望你以后能支持我们！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。