event对象的属性：clientX、clientY、pageX、pageY、offsetX、offsetY

最新推荐文章于 2022-03-30 18:03:38 发布
最新推荐文章于 2022-03-30 18:03:38 发布
阅读量337 收藏
点赞数
分类专栏： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44077629/article/details/104441485
版权
  • clientX：距离可视窗口左面的距离
  • clientY：距离可视窗口顶端的距离
  • pageX：距离整个页面（超出可视窗口的页面）左面的距离
  • pageY：距离整个页面（超出可视窗口的页面）顶端的距离
  • offsetX：距离容器左面的距离
  • offsetY：距离容器顶部的距离
L鹿先生
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
[转]分析x,offsetX clientX screenX,pageX,y,offsetY clientY screenY,pageY之间的区别
03-17
NULL 博文链接：https://meizhi.iteye.com/blog/576133
鼠标事件clientX、clientY
04-21
clientX、clientY、pageX、pageY、screenX、screenY、offsetX、offsetY
浏览器的各种长度宽度clientX clientY pageX pageY x y
yaoqian的博客
09-18 999
1，首先测试pageX ,pageY和clientX clientY        鼠标固定某一位置，通过上下键来移动滚动条，发现clientX clientY始终不变，pageX ,pageY随时变化        pageX，pageY: 以页面为左上角（绝对位置）为参考点，鼠标所在位置坐标是随时变化的        clientX， clientY ：以当前看到页面的左上角（相对位置）
jq06--jq事件对象、event、data、pageX/pageY、target、keyCode、which
muzidigbig的博客
07-13 459
1   jQuery事件对象介绍概述：jq事件对象可以简单的理解成对象发生完绑定事件后每个对象所对应的处理函数的event参数事件处理函数不给event参数虽然也可打印出event，但是打印出来的对象缺少很多数据（下面可自行再控制台打开查找不同）建议在事件处理函数上添加event参数<!DOCTYPE html> <html lang="en"> <head> ...
鼠标事件中event对象的clientx和pagex的区别与联系_宿雪家的小镇_新浪博客
suxue1994的博客
03-01 179
event.clientX、event.clientY 　　鼠标相对于浏览器窗口可视区域的X，Y坐标（窗口坐标），可视区域不包括工具栏和滚动条。IE事件和标准事件都定义了这2个属性 　　event.pageX、event.pageY 　　类似于event.clientX、event.clientY，但它们使用的是文档坐标而非窗口坐标。这2个属性不是标准属性，但得到了广泛支...
一文看懂js中的clientX，clientY，pageX，pageY，screenX，screenY
m0_37856464的博客
02-02 549
原文：https://www.cnblogs.com/jsydb/p/12344622.html
js中event事件对象的兼容问题以及坐标属性-（clientX clientY;pageX,pageY,offsetX,offsetY）...
weixin_30580943的博客
03-08 370
这些天好好研究了下事件这部分的知识，个人觉得基础决定了高度。所有这段时间虽然没有工作，但是能够静下心来好好研究一下基础的东西还是不错的。心情也很不错的。所以呐，今天总结了下事件当中event属性。 1，首先我们来说一下event属性的兼容问题，在标准浏览器下我们直接传event就好。但是在非标准浏览器下，没有这个属性我们要用window.event;所有呐一旦我们用到event属性的时候一定要注...
JavaScript中获取鼠标位置相关属性总结
12-11
javascript并没有mouse对象，获取鼠标坐标要靠强大的event对象。 我们通过监听document的mousemove，就可以实时获得鼠标位置。 但是！！event中和鼠标相关的属性太多了，很让人头大！如下： event.layerX event....
js Event对象的5种坐标
10-28
JavaScript中的Event对象提供了多种坐标属性，用于描述鼠标事件发生时的位置信息。这些坐标在不同的浏览器中可能存在兼容性问题，因此理解和正确使用它们是编写跨浏览器交互功能的关键。 首先，我们来看一下Event...
整理的比较全的event对像在ie与firefox浏览器中的区别
01-19
FF：event.pageX和event.pageY。 通用：两者都有event.clientX和event.clientY属性。 鼠标当前坐标(加上滚动条滚过的距离) IE：event.offsetX和event.offsetY。 FF：event.layerX和event.layerY。 标签的x和y的坐标...
jQuery Event对象的属性和方法
xyjikl
07-16 1402
介绍之前先介绍jQuery的一个方法 jQuery.event.fix(event || window.event); 此方法个浏览器的event对象转换为 jQuery.event; 如果您的事件是通过jQuery方法绑定的，就不需要进行转换了！ jQuery在遵循W3C规范的情况下，对事件的常用属性进行了封装，使得事件处理在各大浏览器下都可以正常的运行而不需要进行浏览器类型判断。
对于clientX、clientY、offsetX、offsetY、pageX、pageY的理解
qq_41445106的博客
07-16 1115
对于clientX、clientY、offsetX、offsetY、pageX、pageY的理解 首先声明一下这几个都是和事件相关的属性 1.clientX、clientY属性：鼠标在可视区X坐标和Y坐标，即距离左边框和上边框的距离 2.screenX、screenY属性：鼠标在屏幕区X坐标和Y坐标，即距离左屏幕和上屏幕的距离 3.offsetX、offsetY属性：鼠标相对于事件源的X坐标和Y坐...
容易混淆的e.clientX,e.clientY e.pageX e.pageY e.offsetX e.offsetY
读心悦
05-08 978
理解 e.clientX,e.clientY e.pageX e.pageY e.offsetX e.offsetY event.clientX、event.clientY 鼠标相对于浏览器窗口可视区域的X，Y坐标（窗口坐标），可视区域不包括工具栏和滚动条。IE事件和标准事件都定义了这2个属性 event.pageX、event.pageY 类似于event.clientX、event.c...
event中的[clientX,offsetX,screenX,pageX]
weixin_30485799的博客
03-26 112
0.1. clientX clientY event.clientX event.clientY client直译就是客户端，客户端的窗口就是指游览器的显示页面内容的窗口大小（不包含工具栏、导航栏等等）。 event.clientX、event.clientY就是用来获取鼠标距游览器显示窗口的长度。 client范围 兼容性：IE和主流游览器都支持。 0.1.1. offsetX...
jQuery学习笔记4——event.pageX()方法/event.pageY()方法
weixin_30301449的博客
07-10 348
该方法的作用是获取到光标相对于页面的X坐标和Y坐标。网页中常用的title提示效果就和这两个属性有关。 <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http:...
event对象的clientX,offsetX,screenX,pageX和offsetTop,offsetHeight等等
weixin_34327761的博客
08-06 128
先总结下区别： event.clientX、event.clientY 鼠标相对于浏览器窗口可视区域的X，Y坐标（窗口坐标），可视区域不包括工具栏和滚动条。IE事件和标准事件都定义了这2个属性 event.pageX、event.pageY 类似于event.clientX、event.clientY，但它们使用的是文档坐标而非窗口坐标。这2个属性不是标准属性，但得到了广泛支持。IE事件中...
event对象的offsetX、clientX、pageX、screenX及 window.innerWidth、outerWidth使用详解
lwx931449660的博客
05-12 1283
offset offsetX、offsetY为当前鼠标点击位置距离当前元素参考原点（左上角）的距离，而不同浏览器参考原点的位置不尽相同，FF及Chrome中参考原点为内容区域左上角，不包含元素边框 offsetX 鼠标当前点击位置距离当前点击元素内容区域最左边（不包含边框）的距离 offsetY 鼠标当前点击位置距离当前点击元素内容区域最上边（不包含边框）的距离 点击不同位置，参考原点不同，则距离不同 以下四个点可供理解offset的相对位置及尺寸 client...
触摸事件获取不到e.offset属性解决办法
PIOnly的博客
03-30 1156
触摸屏时获取不到e.offsetX属性以及元素的clientLeft 或 scrollLeft的值，所以改用pageX(表示触摸点相对于网页左上角的水平位置)减去getBoundingClientRect().left(获取图片元素相对于视窗左上角的水平位置)的值代替
解决FireFox的鼠标Event中没有offsetX,offsetY的办法
懒蜗牛
08-26 778
之前制作了一个html版的连连看，最近改成html5版的，遇到了如何获取当前点击图片的问题。 因为之前的连连看用的图片是一个个零碎的图片，放入一个固定大小的div中，然后设置图片统一向左浮动。通过js事件委托，当点击图片的时候，查找当前event的target，就能得到点击的图片。 但是改成html5之后，所有的图片都被画在一个canvas里，鼠标点击的时候只能获取到整个canvas ...
微信开发者工具 touches属性的pageX: 86, pageY: 177.75, clientX: 86, clientY: 177.75分别是什么意思？
最新发布
06-13
这些属性是指触摸点的坐标信息，具体解释如下： - `pageX` 和 `pageY`：触摸点相对于文档页面左上角的坐标。 - `clientX` 和 `clientY`：触摸点相对于浏览器窗口左上角的坐标。 一般来说，`pageX/Y` 和 `clientX/Y` 的值是相同的，除非页面发生了滚动，此时 `pageX/Y` 的值会随着滚动而改变。这些属性在处理触摸事件时非常有用，可以让开发者获取触摸点的精确位置，以便进行相关的操作。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值