鼠标事件中鼠标位置的获取

鼠标事件是最常用的一类事件,包括

  • click: 单击鼠标左键或按下回车键时触发
  • mousedown:按下任意鼠标按键时触发
  • mouseup: 松开鼠标按键时触发
  • mouseenter: 鼠标光标从元素外部首次移动到元素范围之内时触发,和mouseover不同的是,mouseenter在光标移动到后代元素上时不会触发
  • mouseover: 鼠标指针从元素外部移动到元素边界之内时触发,光标移动到后代元素上也会触发
  • dbclick:双击鼠标左键

客户区坐标位置

事件对象的clientXclientY属性,分别表示事件发生时鼠标指针在视口,即可视区域内的水平和垂直坐标

页面坐标位置

事件对象的pageXpageY属性,分别表示事件发生时鼠标光标在页面中的位置。
如果页面没有滚动,那么pageXpageY的值与clienXclientY的值相同
如果页面发生了滚动,event.pageY === document.documentElement.scrollTop + event.clientY

注:如何获取一个元素的位置

可以用element.getBoundingClientRect()
如果要获取鼠标事件相对与一个元素的位置,可以用

var rect = element.getBoundingClientRect()
var x = event.pageX - rect.x
var y = event.pageY - rect.y

屏幕坐标位置

screenXscreenY属性分别表示事件发生时鼠标指针相对于整个屏幕的坐标位置

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  •   JavaScript 与 HTML 之间的交互是通过事件实现的。   事件,就是文档或浏览器窗口中发生的一些特...
    霜天晓阅读 3,581评论 1 11
  • Web 浏览器中可能发生的事件有很多类型。如前所述,不同的事件类型具有不同的信息,而 DOM3 级事件规定了以下几...
    More_5897阅读 1,003评论 1 0
  • 本节介绍各种常见的浏览器事件。 鼠标事件 鼠标事件指与鼠标相关的事件,主要有以下一些。 click 事件,dblc...
    许先生__阅读 2,541评论 0 4
  • DOM3级事件中定义了以下9个鼠标事件: click:在用户单击主鼠标按钮或者按下回车键时触发。意味着onclic...
    陆lmj阅读 1,240评论 0 1
  • 事件类型 Web 浏览器中可能发生的事件有很多类型UI事件:当用户与界面上的元素交互时触发。焦点事件:当元素获得或...
    shanruopeng阅读 964评论 0 0