JS 中clientX clientY offsetX offsetY 等属性说明

最新推荐文章于 2023-04-04 18:13:54 发布
最新推荐文章于 2023-04-04 18:13:54 发布
阅读量3.5k 收藏 25
点赞数 8
分类专栏： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43972992/article/details/102795192
版权

JS中clientX clientY offsetX offsetY 等属性说明

示意图
在这里插入图片描述

  1. event.clientX, event.clientY : 鼠标点击的位置距离 body 的大小
  2. event.screenX, event.screenY : 鼠标点击的位置距离 屏幕 的大小
  3. event.offsetX, event.offsetY 鼠标点击的位置距离 div盒子 的大小

没有滚动条的情况下

  1. offsetWidth, offsetHeight, 盒子的大小, 包括了 padding + border + div的width
  2. clientWidth, clientHeight, 盒子的大小, padding + div的width
  3. scrollWidth, scrollHeight 盒子的大小 , padding + div的width
    在这里插入图片描述

存在滚动条

  1. scrollWidth为实际内容的宽度
  2. clientWidth是内容可视区的宽度。
  3. offsetWidth是元素的实际宽度。
    在这里插入图片描述
小火车况且况且
关注
  • 8
    点赞
  • 踩
  • 25
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
[转]分析x,offsetX clientX screenX,pageX,y,offsetY clientY screenY,pageY之间的区别
03-17
在JavaScript中，处理鼠标事件时，经常会遇到一系列与鼠标位置相关的属性，如`x`, `offsetX`, `clientX`, `screenX`, `pageX`, `y`, `offsetY`, `clientY`, `screenY`, `pageY`等。这些属性在不同的上下文下提供了...
JavaScript中获取鼠标位置相关属性总结
12-11
javascript并没有mouse对象，获取鼠标坐标要靠强大的event对象。 我们通过监听document的mousemove，就可以实时获得鼠标位置。 但是！！event中和鼠标相关的属性太多了，很让人头大！如下： event.layerX event....
区分event对象中的[clientX,offsetX,screenX,pageX]
嘿嘿
07-06 928
前言 在平时的开发中，非常讨厌的就是兼容性了，兼容性的问题总会让我们记忆混淆，所以这次来区分一下event对象中的常用获取鼠标位置。 clientX clientY event.clientX event.clientY client直译就是客户端，客户端的窗口就是指游览器的显示页面内容的窗口大小（不包含工具栏、导航栏等等）。 event.clientX、event.clientY就是用来获取鼠标距游览器显示窗口的长度。 client范围 兼容性：IE和主流游览器都支持。 offse
js计算滚轮滚动到导航组件时吸顶
qq_41411324的博客
02-03 316
页面： 吸顶方法：
js e.offsetX 和 e.offsetY
JDDDDDDyaya的博客
11-07 2192
本人自己在写代码的过程中，一直对e.offsetX 与 e.offsetY 分不清，今天好好探究一下e.offsetX 与 e.offsetY e.offsetX 与 e.offsetY 下相对与事件源的距离，也就是e.target， 大家看下面例子,给出几张截图。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name
JS的Event属性和方法
xyjikl
07-13 2019
Event对象只在事件发生的过程中才有效。 Event的某些属性只对特定的事件有意义。比如，fromElement 和 toElement 属性只对 onmouseover 和 onmouseout 事件有意义。 Event举例 下面的例子检查鼠标是否在链接上单击，并且，如果shift键被按下，就取消链接的跳转。 view sourceprint 01
JS——clientX/Y、screenX/Y、pageX/Y、layerX/Y、offsetX/Y的区别
Dream_6666的博客
04-04 516
JS——clientX/Y、screenX/Y、pageX/Y、layerX/Y、offsetX/Y的区别
鼠标事件clientX、clientY
04-21
clientX、clientY、pageX、pageY、screenX、screenY、offsetX、offsetY
Javascript中Event属性搜集整理
01-21
altKey, button, cancelBubble, clientX, clientY, ctrlKey, fromElement, keyCode, offsetX, offsetY, propertyName, returnValue, screenX, screenY, shiftKey, srcElement, srcFilter, toElement, type, x, y 1....
div-bigbox.rar_HTML中bigbox
09-20
var offsetX = event.clientX - img.offsetLeft - magnifierWidth / 2; var offsetY = event.clientY - img.offsetTop - magnifierHeight / 2; // 防止越界 if (offsetX ) offsetX = 0; if (offsetY ) offsetY...
event事件坐标详解（clientx， offsetx， screenX等）
zlzbt
07-23 7931
鼠标事件（e=e||window.event） event.clientX、event.clientY (相对浏览器窗口) //鼠标相对于浏览器窗口可视区域的X，Y坐标（窗口坐标），可视区域不包括工具栏和滚动条。IE事件和标准事件都定义了这2个属性 function getMousePos(event) { var e = event || window.event; return {'x':e.clientX,'y':clientY} } clientX与client..
一文看懂js中的clientX，clientY，pageX，pageY，screenX，screenY
m0_37856464的博客
02-02 555
原文：https://www.cnblogs.com/jsydb/p/12344622.html
JavaScript中的事件对象、事件对象的属性clientX、clientY、pageX、pageY等等
weixin_46449470的博客
04-26 1240
一、什么是事件对象 ​ 1）、 事件对象 就是保存着事件相关信息的对象。当事件发生时，会自动产生事件对象（不需要new），事件对象中包含着：事件源（发生事件的dom元素），点击是鼠标的哪个键，鼠标的当前位置（事件发生的位置）等等信息。 2）、事件源： ​ 发生事件的DOM元素（按钮，文本框，div，下拉框）。在事件处理函数里可以用this表示。 3）、事件对象的获取 ​ ...
js 事件回调函数的对象属性说明：clientX、screenX、offsetX、pageX
PrimaryColor
11-19 1536
clientX 鼠标相对于浏览器左上角x轴的坐标； 不随滚动条滚动而改变； clientY 鼠标相对于浏览器左上角y轴的坐标； 不随滚动条滚动而改变； pageX 鼠标相对于浏览器左上角x轴的坐标； 随滚动条滚动而改变； pageY 鼠标相对于浏览器左上角y轴的坐标； 随滚动条滚动而改变； screenX 鼠标相对于显示器屏幕左上角x轴的坐标； screenY 鼠标相对于显示器屏幕左上角y轴的坐标； offsetX 鼠标相对于被绑定事件的元素左上角X轴的坐标； offsetY 鼠标相对于...
event对象的clientX,clientY与offsetX,offsetY有何不同？还有x,y?
DavidMen的专栏
09-10 1298
event对象的clientX,clientY与offsetX,offsetY有何不同？还有x,y?2007-10-10 17:41clientX 设置或获取鼠标指针位置相对于窗口客户区域的 x 坐标，其中客户区域不包括窗口自身的控件和滚动条。 clientY 设置或获取鼠标指针位置相对于窗口客户区域的 y 坐标，其中客户区域不包括窗口自身的控件和滚动条。 offset
js中offset、client、scroll、screen、page用法
CYL_2021的博客
04-26 1605
一.offset offset翻译过来就是偏移量，我们使用offset系列相关属性可以动态的得到该元素的位置（偏移），大小等 获取元素距离带有定位父元素的位置 获取元素自身的大小（宽度高度） 注意：返回值都不带单位 常用属性： 1.1 offsetX，offsetY 获取鼠标指针位置相对于触发事件的对象的 x 坐标和y坐标。offsetX （offsetY）规定了事件对象与目标节点的内填充边（padding edge）在 X （Y）轴方向上的偏移量。 2.2 offsetWidth，offsetHe
浅谈event.client、event.screen与event.offset
weixin_30535565的博客
09-30 264
　　每每看到event.client、event.screen与event.offset这几个，头都大了，今天又碰到了，特来总结下。 　　1、event.screenX与event.screenY。 　　首先，event.screenX是鼠标相对于用户显示器屏幕左上角的X坐标。 　　而event.screenY则是鼠标相对于用户显示器屏幕左上角的Y坐标。 　　在标准事件和IE事件中都定义了...
JS之clientX,clientY,screenX,screenY,offsetX,offsetY等区别
MO天才的博客
03-15 1865
1.event.clientX、event.clientY鼠标相对于浏览器窗口可视区域的X，Y坐标（窗口坐标），可视区域不包括工具栏和滚动条。IE事件和标准事件都定义了这2个属性2.event.pageX、event.pageY类似于event.clientX、event.clientY，但它们使用的是文档坐标而非窗口坐标。这2个属性不是标准属性，但得到了广泛支持。IE事件中没有这2个属性。3.e...
补全下面的html和css代码，实现这个功能可以分为两个步骤： 实现小球的拖拽 可以通过监听小球的mousedown、mousemove和mouseup事件，实现小球的拖拽。具体实现方法如下： 复制 var ball = document.getElementById("ball"); var container = document.getElementById("container"); var isDragging = false; var offsetX = 0; var offsetY = 0; ball.addEventListener("mousedown", function(e) { isDragging = true; offsetX = e.offsetX; offsetY = e.offsetY; }); document.addEventListener("mousemove", function(e) { if (isDragging) { var x = e.clientX - offsetX; var y = e.clientY - offsetY; ball.style.left = x + "px"; ball.style.top = y + "px"; } }); document.addEventListener("mouseup", function() { isDragging = false; }); 判断小球是否移动到框里 可以通过判断小球是否与框的边界相交，来判断小球是否移动到框里。具体实现方法如下： 复制 var ballRect = ball.getBoundingClientRect(); var containerRect = container.getBoundingClientRect(); if ( ballRect.left >= containerRect.left && ballRect.right <= containerRect.right && ballRect.top >= containerRect.top && ballRect.bottom <= containerRect.bottom ) { // 小球在框里 } else { // 小球不在框里 } 把这两个步骤结合起来，就可以实现拖拽小球移动到框里的功能了。
最新发布
05-28
var x = e.clientX - offsetX; var y = e.clientY - offsetY; ball.style.left = x + "px"; ball.style.top = y + "px"; } }); document.addEventListener("mouseup", function() { isDragging = false; ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值