JavaScript鼠标事件(MouseEvent)案例解释
更新时间:2021年8月19日17:06:43 作者:韩宇智
本文主要介绍JavaScript鼠标事件(MouseEvent)案例讲解。 本文通过一个简单的案例来讲解该技术的理解和使用。 以下是详细内容。 有需要的同学可以参考以下
鼠标事件-MouseEvent
当鼠标执行某种操作时,会生成一个事件对象,该对象记录了键盘触发风暴时的所有属性。
您可以在Google控制台中复制MouseEvent对象,如下所示。
function mouseDown(e){ var e = e||event; console.log(e) } window.onload = function (){ document.getElementsByTagName('body')[0].addEventListener('mousedown',mouseDown,false) }
打印的MouseEvent如下:
这个对象的属性有很多html鼠标事件,但最常用的是offsetX、offsetY、clientX/clientY、pageX、pageY。 每个属性对应什么?
以下是常用的风暴列表
altkey :触发键盘风暴时是否按下alt键,如果按下则返回true,否则返回fasle。
Button:事件属性返回一个阿拉伯数字,0表示按下左键,1表示按下滚轮,2表示按下右键。
offsetX、offsetY:事件属性返回风暴触发时鼠标相对于风暴源元素的X、Y坐标。 标准风暴没有对应的属性。
clientX、clientY:事件属性返回风暴触发时键盘指针相对于浏览器页面(或客户区)的水平和垂直坐标。
pageX、pageY:事件属性返回风暴触发时键盘指针相对于整个页面左上角的横纵坐标。
screenX, screenY:事件属性返回风暴触发时键盘位置相对于用户屏幕的水平和垂直坐标。 此时的参考点是原点是屏幕的左上角。
嗯html鼠标事件,用语言表达总是很烦人。 最后一张经典图说明了一切:
关于JavaScript鼠标事件(MouseEvent)案例讲解的这篇文章到此结束。 更多相关JavaScript鼠标事件(MouseEvent)内容请搜索JavaScript之家往期文章或继续浏览下方相关文章。 希望大家在以后有更多的支持脚本之家!