offsetX、offsetY...

已于 2024-09-22 12:51:58 修改
阅读量305 收藏 4
点赞数 4
文章标签： javascript 前端 开发语言
于 2024-09-22 12:49:51 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2302_80244686/article/details/142435165
版权

文章目录

offsetX & offsetY

鼠标事件或者触发事件相对于事件的元素左边缘的水平和垂直偏移量 (就是以当前触发的元素为基底，鼠标位于你触发元素所在的位置)

clientX & clientY

是指鼠标事件在浏览器可视窗口的位置

pageX & pageY

是指鼠标事件在浏览器整个页面中（包括滚动部分）的中的位置

screenX & screenY

是一个用于获取浏览器窗口相对于屏幕左上角的水平/垂直坐标位置的属性。
screenX 属性通常用于确定浏览器窗口在屏幕上的位置，或者与其他元素的位置进行比较。例如，可以使用 screenX 属性来确定浏览器窗口在屏幕上的水平位置，以便在特定位置显示其他元素。

innerHeight & innerWidth

指整个浏览器可视窗口的大小 不包括浏览器的工具栏、地址栏等

offsetHeight & offsetWidth

返回触发元素的的像素的高度/宽度，包括该元素的高度的垂直的内边距和边框 且是一个整数
在这里插入图片描述

offsetTop & offsetLeft

表示元素的上外边/左边框至offsetParent元素的上内边框/左边框之间的像素距离(若无父元素则以浏览器为offsetParent)

scrollHeight & scrollWidth

表示元素的滚动内容的总高度/宽度 包括被隐藏的内容，即使在可见区域外也会计算在内。如果元素没有发生垂直滚动，则 scrollHeight 的值等于元素的实际高度。可以通过设置元素的滚动位置（scrollTop）来访问超出可见范围的内容。

scrollTop & scrollLeft:

表示被隐藏在内容区域的上方/左边的高度/宽度

与scrollHeight和scrollWidth的区别

scrollTop和scrollWidth一般用于获取或者设置元素的滚动位置 ，而scrollHeight和scrollWidth用于获取元素内容的完整的高度
在这里插入图片描述

浏览器窗口客户端区域：

浏览器窗口客户区域指的是浏览器窗口中用于显示网页内容的区域，即不包括浏览器工具栏、标签栏、地址栏和滚动条等部分。它是网页可视区域的一部分。

多多米1005
关注
js e.offsetX 和 e.offsetY
JDDDDDDyaya的博客
11-07 2257
本人自己在写代码的过程中，一直对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
offsetX offsetY等总结
meiyaohuhu的博客
07-28 1189
offsetLeft该元素外边框距离包含元素内边框左侧的距离。offsetTop该元素外边框距离包含元素内边框顶部的距离。clientX鼠标的坐标到页面左侧的距离。clientY鼠标的坐标到页面顶部的距离。offsetX鼠标坐标到元素的左侧的距离。offsetY鼠标坐标到元素的顶部的距离。clientHeight可视区域的高度。screenX屏幕X坐标位置。screenY屏幕Y坐标位置。pageX页面X坐标位置。pageY页面Y坐标位置。...
e.offsetX e.offsetY、e.clientX e.clientY 、e.clientX,e.clientY
前端转行卖烧饼
06-26 397
IE、Safari、Chrome 和 Opera 支持 screenLeft 和 screenTop而Chrome、Firefox 和 Safari 支持 screenX 和 screenY
理解 e.clientX,e.clientY e.pageX e.pageY e.offsetX e.offsetY
weixin_34375054的博客
05-23 151
event.clientX、event.clientY 鼠标相对于浏览器窗口可视区域的X，Y坐标（窗口坐标），可视区域不包括工具栏和滚动条。IE事件和标准事件都定义了这2个属性 event.pageX、event.pageY 类似于event.clientX、event.clientY，但它们使用的是文档坐标而非窗口坐标。这2个属性不是标准属性，但得到了广泛支持。IE事件中没有这2个属性。 ...
JS 中clientX clientY offsetX offsetY 等属性说明
小火车况且况且况且的博客
10-29 3606
CSS 中clientX clientY offsetX offsetY 等属性说明 示意图 event.clientX, event.clientY : 鼠标点击的位置距离 body 的大小 event.screenX, event.screenY : 鼠标点击的位置距离 屏幕 的大小 event.offsetX, event.offsetY 鼠标点击的位置距离 div盒子 的大小 没有...
html5 offsetx,HTML5将发布OFFSETX OFFSETY跳(HTML5 Drag Release offset
weixin_39852121的博客
06-25 325
我在玩与HTML5拖放和跟踪鼠标的位置，而拖动。直到你松开鼠标OFFSETX和OFFSETY工作真棒，偏移跳转到负数的最后拖动事件调度这里的HTML：这里的CSS：#dragger{-webkit-user-drag: element;width: 100px;height: 100px;background: hsla(200, 100%, 50%, 0.4);}​和JS$('#dragger'...
容易混淆的e.clientX,e.clientY e.pageX e.pageY e.offsetX e.offsetY
读心悦
05-08 999
理解 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...
深入理解 e.clientX,e.clientY e.pageX e.pageY e.offsetX e.offsetY
juceli的博客
07-24 1168
event.clientX、event.clientY 鼠标相对于浏览器窗口可视区域的X，Y坐标（窗口坐标），可视区域不包括工具栏和滚动条。IE事件和标准事件都定义了这2个属性 event.pageX、event.pageY 类似于event.clientX、event.clientY，但它们使用的是文档坐标而非窗口坐标。这2个属性不是标准属性，但得到了广泛支持。IE事件中没有这2个属性。 ...
072-JQ-理解 e.clientX,e.clientY e.pageX e.pageY e.offsetX e.offsetY
Gy_9543的博客
07-26 233
转自https://www.cnblogs.com/deerfig/p/6432683.html event.clientX、event.clientY 鼠标相对于浏览器窗口可视区域的X，Y坐标（窗口坐标），可视区域不包括工具栏和滚动条。IE事件和标准事件都定义了这2个属性 event.pageX、event.pageY 类似于event.clientX、event.clientY，但它们使用的是文档坐标而非窗口坐标。这2个属性不是标准属性，但得到了广泛支持。IE事件中没有这2个属性。 event.offs
优化这段代码 if ( e.offsetY <= 0) { console.log(e.offsetX,e.offsetY,i) if (e.offsetX >0 && e.offsetY >-34) { console.log(e.offsetX, e.offsetY, i, '范围') this.pop = true } else if(e.offsetX < 0 && e.offsetY<=-34) { setTimeout(() => { this.pop = false }, 500); } } if ( e.offsetX <= 0) { setTimeout(() => { this.pop = false }, 500); }
05-25
if (e.offsetY <= 0 && e.offsetX > 0 && e.offsetY > -34) { // 范围内 this.pop = true; console.log(e.offsetX, e.offsetY, i, '范围'); } else if (e.offsetY <= 0 && e.offsetX < 0 && e.offsetY ) { // ...
const x = e.offsetX / this.offsetWidth; const y = e.offsetY / this.offsetHeight;
05-17
其中，`e` 是鼠标事件对象，`offsetX` 和 `offsetY` 分别表示鼠标相对于元素左上角的水平和垂直偏移量，`offsetWidth` 和 `offsetHeight` 分别表示元素的宽度和高度。通过将偏移量除以宽度和高度，可以得到鼠标在...
var box = document.querySelector('.box') var box1 = document.querySelector('.box1') box.onmousedown = function (e) { var e = e || window.event var e = event.offsetX var d = event.offsetY console.log(e) console.log(d) } box1.onmousemove = function (e) { var e = e || window.event var x =event.offsetX var y =event.offsetY console.log(x) console.log(y) box.style.left = x + 'px' box.style.top = y + 'px' } box1.onmouseup = function () { console.log('我要取消了移动事件') box1.onmousemove = null } 这段代码的错误
05-26
2. 在 box1.onmousemove 事件处理函数中，获取鼠标移动位置时，将 event 对象的 offsetX 和 offsetY 属性分别赋值给了变量 x 和 y，但是变量 x 和 y 在后面的代码中没有被使用，导致无法实现 box 的移动。...
mousedown(event) { console.log(event); console.log('div1.offsetX', event.offsetX); console.log('div1.offsetY', event.offsetY); let xy = (event.offsetX + ',' + event.offsetY) console.log('div1.xy', xy); this.points = '10, 10 ' + xy + ' 180, 10' }
03-08
这段代码是在鼠标按下时触发的事件处理函数，它会输出事件对象 event，以及鼠标在 div1 元素内的偏移量 offsetX 和 offsetY。然后将这个偏移量与字符串拼接成一个坐标点 xy，并将其存储在 this.points 中。最后，将...
js获取个屏幕鼠标盒子的距离(e.clientX,e.offsetX,e.pageX,e.screenX)
x_xiNan9416的博客
09-23 638
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } #box{ width: 200px; height: 200px; border: 1px solid red.
计算机毕业设计之：基于微信小程序的诗词智能学习系统（源码+文档+解答）
程序员阿龙的博客
09-22 4466
博主介绍： ✌我是阿龙，一名专注于Java技术领域的程序员，全网拥有10W+粉丝。作为CSDN特邀作者、博客专家、新星计划导师，我在计算机毕业设计开发方面积累了丰富的经验。同时，我也是掘金、华为云、阿里云、InfoQ等平台的优质作者。通过长期分享和实战指导，我致力于帮助更多学生完成毕业项目和技术提升。 技术范围： 我熟悉的技术领域涵盖SpringBoot、Vue、SSM、HLMT、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、小程序、安卓app、大数据、物联网、机器学习等方
解决uniapp使用up-form组件，uView提示:未设置rules,请看文档说明!如果已经设置,请刷新页面。
最新发布
李浩洋
09-24 234
解决uniapp使用up-form组件，uView提示:未设置rules,请看文档说明!如果已经设置,请刷新页面。up-form组件 :model=“formData” :rules=“rules”要赋初始值
基于JavaWeb开发的Java+SpringMvc+vue+element实现驾校管理系统详细设计
央顺科技官方博客
09-24 856
机遇与挑战始终并存。在开放的互联网平台面前，驾校预约管理系统的信息管理面临着巨大的挑战。传统的管理模式局限于简单数据的管理，无法适应不断变化的市场格局。在早期阶段，在将计算机技术和网络技术融入驾校预约管理系统数据管理方法之前，所有管理方式都通过人工操作完成了管理信息的。系统管理也都将通过计算机进行整体智能化操作，对于驾校预约管理系统所牵扯的管理及数据保存都是非常多的，举例像所有详细信息包括，管理员；首页、个人中心、学员管理、驾校教练管理、驾校车辆管理、预约管理、取消预约管理、驾校公告管理、系统管理。
vue上传预览CAD文件
只会写bug
09-24 569
如果选择的是 Three.js，那么可以创建一个场景来加载和显示模型。如果是用特定的 CAD 查看器库，则按照其文档进行集成即可。根据具体需求和技术能力，可以选择最适合的解决方案来实现 CAD 文件的上传和预览功能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值