e.pageX e.pageY

最新推荐文章于 2022-10-21 10:37:16 发布
原创 最新推荐文章于 2022-10-21 10:37:16 发布 · 3k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍如何使用JavaScript中的pageX和pageY属性来获取鼠标指针在文档中的精确位置，并通过一个简单的示例展示了如何实时更新这些坐标。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

显示鼠标指针的位置：
$(document).mousemove(function(e){
  $("span").text("X: " + e.pageX + ", Y: " + e.pageY);
});

定义和用法
pageX() 属性是鼠标指针的位置，相对于文档的左边缘。
语法
event.pageX
参数 描述
event 必需。规定要使用的事件。这个 event参数来自事件绑定函数。


$(document).mousemove(function(e){
  $("span").text("X: " + e.pageX + ", Y: " + e.pageY);
});

定义和用法
pageY() 属性是鼠标指针的位置，相对于文档的上边缘。
语法
event.pageY
参数 描述
event 必需。规定要使用的事件。这个 event参数来自事件绑定函数。
元素偏移量offset系列及e.pageX(e.pageY)
katherin_wanzi的博客
07-14 1503
1.offset概述 注意：目标元素的父元素要有定位，否则偏移量为目标元素与元素之间的距离 2.offset与style的区别 3.e.pageX和e.pageY 目标元素在浏览器中的位置 案例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initi
【JS 面试题】理解 e.clientXY 和 e.pageXY：鼠标坐标详
辅导大学生代码设计15年
07-31 564
在Web开发中，处理鼠标事件是常见的任务。要正确响应这些事件，我们经常需要知道鼠标光标在页面上的具体位置。JavaScript事件对象提供了多个属性来获取这些坐标信息，其中最常用的是和。本文将详细解释这两个属性的区别和用途。属性返回鼠标指针的水平坐标，相对于浏览器视口（viewport）的左上边缘。视口是指浏览器窗口中可用于显示网页内容的区域，不包括滚动条。与不同，属性返回鼠标指针的水平坐标，相对于整个文档的左边缘。这意味着无论页面如何滚动，的值都不会改变。假设有一个全屏的页面，用户在页面上点击鼠标。我们想
e.pageX,e.pageY
丑娘娘不丑
07-11 1511
e.pageX,e.pageY表示鼠标在页面上的位置。
手机端拖拽事件，获取pageX和pageY坐标方式
web前端开发-linglong
10-10 1万+
手机端拖拽事件： touchstart事件：当手指触摸屏幕时候触发，即使已经有一个手指放在屏幕上也会触发。 touchmove事件：当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间，调用preventDefault()事件可以阻止滚动。 touchend事件：当手指从屏幕上离开的时候触发。 touchcancel事件：当系统停止跟踪触摸的时候触发。
pageX和pageY
weixin_30869099的博客
08-22 219
pageX() 属性是鼠标指针的位置，相对于文档的左边缘。 pageY() 属性是鼠标指针的位置，相对于文档的上边缘。 例1 $(document).mousemove(function(e){ $("span").text("X: " + e.pageX + ", Y: " + e.pageY); }); 例2 $('#demo').off('click').on('click',f...
e.pageX、e.clientX、e.screenX、e.offsetX的区别以及元素的一些CSS属性
weixin_30952535的博客
06-16 174
e.pageX，e.pageY：返回的值是相对于文档的定位，文档的左上角为(0,0)，向右为正，向下为正，IE不支持；e.clientX，e.clientY：返回的值是相对于屏幕可见区域的坐标，如果页面有滚动条，呗滚动条隐藏的那部分不进行计算，也可以说是相对于屏幕的坐标，但是不计算上方的工具栏；e.screenX，e.screenY：返回的是相对于屏幕的坐标，浏览器上面的工具栏；e.offsetX...
``` //DataGrid右键菜单代码： $("#tbFangJianZiLiao").datagrid({//tbFangJianZiLiao是要右击的当前DataGrid onRowContextMenu: function (e, rowIndex, rowData) { //当你点击右键时触发事件 e.preventDefault(); //阻止当前浏览器捕获右键事件 $(this).datagrid("clearSelections"); //取消所有选中项 $(this).datagrid("selectRow", rowIndex); //根据索引选中该行 $('#menu').menu('show', {//menu是右键菜单的ID //显示右键菜单 left: e.pageX, //在鼠标点击处显示菜单 top: e.pageY }); e.preventDefault(); //阻止浏览器自带的右键菜单弹出 } });```请分析
最新发布
03-13
left: e.pageX, top: e.pageY }); ``` 7. 再次调用了`e.preventDefault()`以进一步确认禁用系统级响应。 --- ### 实现效果说明 最终的效果就是当用户在一个名为“房屋资料”的数据表内任意一行内容区域实施了...
updateMapPoint: function(ev) { if (!($(".bootstrap-datetimepicker-widget").hasClass("picker-open"))) { var e = document.getElementById("idtimezone"); var Index = e.options[e.selectedIndex].value; var group = e.options[e.selectedIndex].parentNode.label; if (group != "ManualOffset") { if(typeof this.map !== 'undefined' && this.map !== null){ var offset = this.map.offset(), x = ev.pageX - offset.left, y = ev.pageY - offset.top, px = x / this.map.outerWidth(), py = y / this.map.outerHeight(), dist, closestDist = 100, closestPoint, i; for (i = 0; i < this.mapPoints.length; i++) { dist = this.mapPoints[i].distance(px, py); if (dist < closestDist) { closestPoint = this.mapPoints[i]; closestDist = dist; } } if (closestPoint) { this.newPoint(closestPoint); } } } } },将此段代码转换成Vue3+Ts语法
05-26
const x = ev.pageX - offset.left; const y = ev.pageY - offset.top; const px = x / this.map.outerWidth(); const py = y / this.map.outerHeight(); let dist: number; let closestDist = 100; let ...
PC端网页特效 | 元素偏移量offset系列
不爱吃菜的菜菜的博客
05-10 442
元素偏移量 offset 系列 offset 概述 offset 翻译过来就是偏移量， 我们使用 offset 系列相关属性可以动态的得到该元素的位置（偏移）、大小等。 获得元素 距离带有定位父元素 的位置 获得元素自身的大小（宽度高度） 注意： 返回的数值都不带单位 element.offsetTop 和 element.offsetLeft 返回的是元素距离 带有定位的父元素 之间的偏移 返回的不带单位的数值 // 1....
解释代码 document.addEventListener("touchmove", e => { if (!istouchstart) return false; const moveX = e.targetTouches[0].pageX - originX; const moveY = e.targetTouches[0].pageY - originY; if (moveX < 0 || moveX + 38 >= w) return false; this.slider.style.left = moveX + "px"; var blockLeft = ((w - 40 - 20) / (w - 40)) * moveX; this.block.style.left = blockLeft + "px"; addClass(this.sliderContainer, "sliderContainer_active"); this.sliderMask.style.width = moveX + "px"; trail.push(moveY); });
05-10
首先，通过`targetTouches`属性获取触摸位置的`pageX`和`pageY`坐标，并计算出相对于初始位置的移动距离`moveX`和`moveY`。然后，根据移动距离限制滑块的位置，如果移动距离超出了限制，则返回false。接着，设置滑块...
e.clientX,e.clientY,e.pageX,e.pageY,e.offsetX,e.offsetY,e.screenX,e.screenY
测试0901-1
01-29 1127
e.clientX,e.clientY, e.pageX , e.pageY , e.offsetX , e.offsetY , e.screenX , e.screenY 欢迎访问我的博客，祝码农同胞们早日走上人生巅峰，迎娶白富美~~~ 声明：参考文档你是如何理解var e=e||window.event的 刚才写博客《ja...
鼠标位置的获取pageX，pageY，screenX，screenY，clientX，和clientY，offsetX ，offsetY，layerX，layerY的使用 和 区别
热门推荐
manba
03-31 1万+
pageX，pageY，screenX，screenY，clientX，和clientY返回一个数，其指示物理“CSS像素”的数量的点是从参考点。事件点是用户单击的位置，参考点是左上角的一个点。这些属性返回该参考点的水平和垂直距离。 1、pageX和pageY： 相对于浏览器中完全呈现内容区域的左上角。此参考点位于左上角的URL栏和后退按钮下方。这一点可以在浏览器窗口中的任何位置， 并且如果在...
clientX, clientY | offsetX, offsetY | pageX, pageY的区别：
YY的博客
10-21 1575
clientX, clientY | offsetX, offsetY | pageX, pageY的区别：
pageX，pageY，screenX，screenY，clientX，和clientY，offsetX ，offsetY，layerX，layerY的使用 和 区别
IT技术宅-北方的刀郎
01-25 2266
pageX，pageY，screenX，screenY，clientX，和clientY返回一个数，其指示物理“CSS像素”的数量的点是从参考点。事件点是用户单击的位置，参考点是左上角的一个点。这些属性返回该参考点的水平和垂直距离。 写了俩文件，放一个文件夹内测试看完就能明白， layerX_pageX_clientX_screenX_window_document_body.html： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transiti
正确使用pageX、pageY、offsetLeft、offsetTop
zheng_pika的博客
07-05 9665
获取鼠标位置的时候，遇到一点疑问，然后验证了一下自己的疑惑；pageX、pageY跟clientX和clientY类似，是相对于浏览器文档的坐标；offsetLeft、offsetTop获取的是固定定位，也就是说，监听某个选择器内的鼠标位置，这个方法返回的是这个固定范围的左上角离页面左上角的距离坐标；下面利用一个简单的div来演示一下div{ width: 100px; ...
要实现鼠标的拖曳事件,对初学者很好理解pagex pagey和dom的样式处理
SanRenKing的博客
11-19 188
对于clientX、clientY、offsetX、offsetY、pageX、pageY的理解
qq_41445106的博客
07-16 1192
对于clientX、clientY、offsetX、offsetY、pageX、pageY的理解 首先声明一下这几个都是和事件相关的属性 1.clientX、clientY属性：鼠标在可视区X坐标和Y坐标，即距离左边框和上边框的距离 2.screenX、screenY属性：鼠标在屏幕区X坐标和Y坐标，即距离左屏幕和上屏幕的距离 3.offsetX、offsetY属性：鼠标相对于事件源的X坐标和Y坐...
pageX/pageY、clientX/clientY、screenX/screenY的区别
cai_niao5623的博客
10-15 2514
在触发鼠标事件的时候会传一个event参数，在这个参数中我们可以获得pageX/pageY、clientX/clientY、screenX/screenY，但是这几个属性有啥区别呢？看下图 screenX/screenY：其实就是你的鼠标指针距离你电脑屏幕左侧边缘和上侧边缘的距离 clientX/clientY：其实就是你的鼠标指针距离当前网页最左侧和最上侧的距离(不包含滚动条的距离) pageX/pageY：其实就是你的鼠标指针距离当前网页最最侧和最上侧的距离(包含滚动条的距离) ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值