js的事件对象获取x，y值

最新推荐文章于 2026-06-22 10:49:04 发布

原创最新推荐文章于 2026-06-22 10:49:04 发布 · 1.7k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

当前文章被以下社区和专栏收录：

本文详细解析了鼠标事件中各种坐标属性的作用与区别，包括clientX/clientY, offsetX/offsetY, pageX/pageY等，以及与之相关的clientWidth/clientHeight, offsetWidth/offsetHeight等尺寸属性，帮助开发者更准确地理解和应用这些属性。

没有兼容问题：

clientX:事件触发时，鼠标位于视口的横坐标的值
clientY:事件触发时，鼠标位于视口的纵坐标的值
offsetX:事件触发时，鼠标位于元素的横坐标的值（最精确元素）
offsetY:事件触发时，鼠标位于元素的纵坐标的值（最精确元素）

有兼容问题

pageX：事件触发时，鼠标位于页面横坐标的值
pageY：事件触发时，鼠标位于页面纵坐标的值

其他

clientWidth : padding + width ;   clientHeight
offsetWidth : border + padding + width ;    offsetHeight
clientLeft : 左边框 ; clientTop
offsetLeft : 从自己的边框外到定位元素的边框内的距离 ;    offsetTop 【IE8是到父元素的边框外】
窗口 = 视口 + 滚动条

快捷尺寸

获取视口尺寸：
   document.documentElement.clientWidth
   document.documentElement.clientHeight

获取窗口尺寸：
   window.innerWidth
   window.innerHeight

标签

#快捷尺寸 #鼠标在页面的x，y值

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

白菜炖咸鱼

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

JavaScript (三) ---[事件,Event对象]

从零开始的异世界JAVA学习

06-15

5851

目录事件Event对象事件为需要处理的事件编写相应的事件处理程序。要理解事件驱动和程序，就需要与非事件驱动的程序进行比较。实际上，现代的程序大多是事件驱动的，比如多线程的程序，肯定是事件驱动的。早期则存在许多非事件驱动的程序，这样的程序，在需要等待某个条件触发时，会不断地检查这个条件，直到条件满足，这是很浪费cpu时间的。而事件驱动的程序，则有机会释放cpu从而进入睡眠态（注意是有机会，当然程序也可自行决定不释放cpu），当事件触发时被操作系统唤醒，这样就能更加有效地使用cpu. 就是对用户的行

参与评论您还未登录，请先登录后发表或查看评论

模仿学习（Imitation Learning）概述

最新发布

jundao1997的专栏

06-22

285

摘要： Xid是NVIDIA显卡驱动记录的硬件/软件异常日志，通过dmesg等工具可获取，包含PCI总线、GPU编号、故障码等信息，是诊断显卡问题的核心依据。Xid故障分为四类：应用程序类（如代码错误，Xid13/31）、显存ECC硬件类（如显存损坏，Xid48/63）、链路/供电温控类（如PCIe故障，Xid74/79）和GSP固件类（如静电干扰，Xid119/154）。排查流程包括日志采集、软件修复（如重启进程、升级驱动）、硬件检查（如PCIe链路状态）及断电复位（针对GSP故障）。预防措施包括监控EC

JS实现经纬度坐标转成XY坐标

qq_44890887的博客

03-18

4422

经纬度坐标转换话不多说，先上代码 function delta(lat, lon) { let PI =3.14159265358979324 let x_pi = 3.14159265358979324 * 3000.0 / 180.0 var a = 6378245.0; // a: 卫星椭球坐标投影到平面地图坐标系的投影因子。 var ee = 0.00669342162296594323; // ee: 椭球的偏心率。 var x=lon - 105.0

js中事件对象中七种坐标

阿妖的博客

11-16

756

1. clientX clientY 相对于浏览器的左上角的xy坐标也就是窗口坐标, 不包括工具栏, 滚动条 2. layerX layerY 是鼠标相对于目标元素最近的具有absolute relative的定位元素的位置包括border 3. movementX movementY 两个鼠标移动事件间隔时间中当中鼠标移动的相对坐标 4. offsetx offsetY 相对于你点击的那个dom节点...

Js公共函数------获得目标元素的位置{x, y}

Sestid的博客

11-13

797

还是废话不多说，直接上代码 /** * getElementPosition * * @description 获得目标元素x,y * @param {target} 目标元素 * @return {object} {x, y} * */ const getElementPosition = element => { let [actualLeft, actualTop, current] = [ element.offsetLeft, element.offs

获取元素属性中的[x] ...

weixin_30765475的博客

12-24

134

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> </head> <body> <div&...

用javaScript确定元素位置的一些函数

alvinchen1010的专栏

11-24

331

/* 根据id判断位置，返回X,Y轴的坐标 */ function getElementPos(elementId){ var ua = navigator.userAgent.toLowerCase(); var isOpera = (ua.indexOf('opera') != -1); var isIE = (ua.indexOf('msie') != -1 &amp...

js中的事件对象event （获取元素的,x,y坐标）

qq_44983621的博客

05-23

8521

event的使用获取元素的,x,y坐标如图所示当鼠标放在上面那个框上时获取其坐标，并且在下面框中显示其实需要使用到鼠标移动事件 onmousemove event 事件对象中封装了当前事项相关的一切属性如鼠标的坐标键盘的按键 <script type="text/javascript"> window.onload = function(){ var bi...

js 获取echarts点击点的X轴和Y轴值

zy_00000的博客

11-22

1万+

function (ec) { var line = ec.init(document.getElementById('lineChart')); var option = { tooltip: { show: true

javascript事件对象-----获取鼠标x,y轴坐标

盼盼大小姐的博客

01-21

1196

js部分 <script> window.onload = function() { let area = document.getElementById('areaBox'); let show = document.getElementById('showBox'); area.onmousemove = function(event) { ...

js中根据x,y 坐标模拟点击事件

weixin_33941350的博客

03-07

5608

现在我有个窗口坐标X,Y. 如何利用JS点击该坐标?document.body.onclick = function(){ e = arguments[0]; var dt = e.target,stag = dt.tagName.toLowerCase(); document.getElementById("out").innerHTML = stag; }; var simulateCl...

JavaScript中鼠标移动事件的坐标获取

plannothing的博客

08-15

2376

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <style type="text/css"> #areaDiv { border: 1px solid black; width: 300px; height: 50px; margin-botto

JQ中怎样获取某个对象x,y轴的坐标

笨小蛋的博客

12-28

4839

JQ中怎样获取鼠标的x,y轴的坐标1，代码如下： $('th p').mouseover(function (e) { var xx = e.originalEvent.x || e.originalEvent.layerX || 0; var yy = e.originalEvent.y || e.originalEvent.layerY || 0; }

如何用 JavaScript 模拟点击事件，简单实现 x, y 坐标点击？

前端达人

07-17

2055

在前端开发中，有时我们需要模拟点击页面上的某个位置，比如自动化测试或者模拟用户操作。今天，我将一步步带大家实现这个功能，让大家能够轻松理解并应用。什么是 x, y 坐标点击？简单来说，x 和 y 坐标就是页面上的一个点的位置。x 代表水平方向，y 代表垂直方向。我们通过这两个数值可以准确地定位到页面上的某个点，然后在这个点上模拟一次点击，就像用户用鼠标点击一样。如何通过 x, y 坐标模拟点击？我...

JavaScript对象与事件

qq_58725061的博客

10-05

1076

DOM是文档对象模型，当页面被加载时。浏览器会创建页面的文档对象模型DOM，HTML DOM文档对象是你的页面中所有其他对象的拥有者。

原生js获取鼠标X、Y轴坐标

夜凉如水

06-15

8822

function mousePosition(evt){ evt = evt || window.event; //Mozilla if(evt.pageX || evt.pageY){ return { x : evt.pageX,y : evt.pageY} } //IE return { x : evt.clientX + document.body.scrollLef

JS：事件对象

2301_80270332的博客

02-19

817

本文深入探讨了JavaScript事件对象的核心概念及其在前端开发中的重要性。事件对象是浏览器为每个事件生成的实例，它提供了事件的详细信息，如事件类型、目标元素、触发时间等。通过事件对象，开发者可以精准地获取用户操作的上下文，并据此实现复杂的交互逻辑。文章首先介绍了事件对象的基本结构和常见属性，随后通过实例展示了如何利用事件对象实现事件委托、阻止冒泡和默认行为等高级功能。最后，结合现代前端框架的事件处理机制，探讨了事件对象在实际开发中的最佳实践和性能优化策略。通过对事件对象的全面剖析，本文旨在帮助开发者更好

浏览器event事件点击X、Y值

weixin_45393020的博客

02-07

224

event对象

JAVASCRIPT常用事件、对象获取技巧

iteye_18492的博客

06-22

139

JAVASCRIPT常用事件、对象获取技巧事件源对象event.srcElement.tagNameevent.srcElement.type捕获释放event.srcElement.setCapture(); event.srcElement.releaseCapture(); 事件按键event.keyCodeevent.shiftKeyevent.altKe...

毕业设计，基于Springboot+Thymeleaf+MySql开发的旅游景点酒店预订网站，内含Java完整源代码，数据库脚本

毕业设计，基于Springboot+Thymeleaf+MySql开发的旅游景点酒店预订网站，内含Java完整源代码，数据库脚本基于Springboot+Thymeleaf旅游景点酒店预订网站毕业源码案例设计旅游网是一个基于SpringBoot框架设计的一个毕业设计，主要类似于一个电商系统主要功能介绍有用户登录注册，景点列表，相册墙，购买景点，评论，酒店管理和一整套后台管理系统。使用到SMS短信注册验证，JMail进行找回密码邮箱验证，OSS阿里云图片存储服务器，RabbitMQ消息队列以及redis缓存等小技术。整个系统采用Restful风格。以json进行数据的传输。前端页面采用BootStrap以及Layui。软件架构1.数据库：MySql5.6 2.前端：Layui，BootStrap，Echars等技术 3.后台：SpringBoot、SpringDataJpa等 4.架构模式：半前后分离架构模式 5.模板引擎：thymeleaf 6.项目管理：Maven 7、JDK版本：1.8 8、额外功能：阿里云短信服务SMS、阿里云图片存储OSS、QQ邮箱验证服务 9