LayerX - 腾讯云开发者社区

文章/答案/技术大牛

发布

关于offsetX、layerX、clientX、screenX以及pageX

就用一张图来说明 [image.png] offsetX：指事件发生位置相对触发元素左上角的水平坐标 layerX： FF特有,鼠标相比较于当前坐标系的位置,即从当前容器依次往上寻找设置绝对定位或相对定位的元素为参考坐标系

1.8K0 0

js鼠标事件 clientX、clientY、offsetX、offsetY、layerX、layerY、pageX、 pageY、screenX、screenY「建议收藏」

layerX,layerY layerX,layerY 往上找有定位属性的父元素的左上角（自身有定位属性的话就是相对于自身），都没有的话，就是相对于body的左上角当元素及它的父级都没有定位属性时，以...layerX,layerY，往上找有定位属性的父元素的左上角（自身有定位属性的话就是相对于自身），都没有的话，就是相对于body的左上角 pageX，pageY相对页面左上角的距离 screenX screenY

4.4K2 0

您找到你想要的搜索结果了吗？

是的

没有找到

JavaScript 获取鼠标及元素在页面上的位置

于是开始“度娘”、“谷哥”……终于发现了两个不是很起眼的属性：layerX/Y和offsetX/Y属性。...layerX/Y和offsetX/Y属性这两个属性跟clientX/Y属性一样，也是事件对象里面的一个属性，但是它们有何区别呢？...别急，咱们一个一个的来分析 layerX/Y属性的说明 layerX/Y获取到的鼠标位置是参考被触发元素左上角的距离 outerEle.onclick = function(e) { // 处理事件对象兼容...var e = e || window.event; console.log(e.layerX); } 在click事件中把e.clientX换成e.layerX，然后进行测试。...简要概括这两个属性当触发元素设置了position属性（属性值不能是static | inherit）,layerX/Y和offsetX/Y就成为了友好的朋友，基本上相同，唯一不同的是，layerX/

4.8K6 0

简单拖拽实现

Drag.fixEvent = function(e){ 33 e = e || window.event; 34 // 在此处，Chrome的layerX...35 // 另外，无法修改事件对象的属性，只能另外添加 36 if(typeof e.layerX == "undefined" || e.layerX...e.offsetX; 38 e.lY = e.offsetY; 39 }else{ 40 e.lX = e.layerX...84 //设定鼠标的移动范围 85 if(this.minX) 86 this.minMouseX = e.layerX

1.5K4 0

client profile_clienttop

layerX:FF特有，鼠标相对于“触发事件的元素的层级关系中离该元素最近的，设置了position的父元素”的边界的位置，从border的左上角开始定位，即如果这个父元素存在border，则坐标原点在...x：IE特有，跟layerX一个效果，可作为layerX的直接替换属性。

4361 0

layerXlayerY与offsetXoffsetY区别

之前说过两种获取事件对象的方法下面说一下,事件对象(事件源)获取位置的方法: layerX/layerY与offsetX/offsetY获取事件源于鼠标作用的位置信息 IE: offsetX...当鼠标事件发生的时候，鼠标相对于事件源X轴的位置 offsetY FF: layerX 当鼠标事件发生的时候，鼠标相对于事件源X轴的位置 layerY 下面简单代码实现事件源位置内容的获取: 鼠标....事件=function(e){ ev=window.event||e;//为了兼容低版本ie和流行版本的符合w3c规则的浏览器前者是低版本ie,后者是w3c的大众浏览器 var left=ev.layerX

1.8K5 0

js获取鼠标当前位置坐标

这是一个IE特有的属性,鼠标相比较于触发事件的元素的位置,以元素盒子模型的内容区域的左上角为参考点,如果有boder,可能出现负值相对于坐标系的layerX/layerY。...鼠标相比较于当前坐标系的位置,即如果触发元素没有设置绝对定位或相对定位,以页面为参考点,如果有,将改变参考坐标系,从触发元素盒子模型的border区域的左上角为参考点也就是当触发元素设置了相对或者绝对定位后,layerX...完全支持所有属性.其中(offsetX和layerX都是以border为参考点) 下面这个是获取相对于屏幕的坐标 document.onmousemove = function(e) { e =

18.3K2 0

2025年数据安全风险：员工把数据“喂给”第三方 AI？——基于流式网关 × 分级响应 × 审计闭环的 AI-DLP 实战方案

链接：LayerX 报告页 https://go.layerxsecurity.com/the-layerx-enterprise-ai-saas-data-security-report-2025 ｜...十、总结：让“治理默认开启”，让“安全不打扰”* 回顾：GenAI 使用常态化；复制粘贴是头号通道；未纳管账号是最大盲区（LayerX 一手锚点）。.../ Copy-Paste DLP / Personal Unmanaged Accounts / Sanctioned AI Controls / Agentic AI Controls主要参考* LayerX...2025 报告页（含下载）：https://go.layerxsecurity.com/the-layerx-enterprise-ai-saas-data-security-report-2025*...LayerX 官方博客汇总：https://blog.layerxsecurity.com/* Microsoft Learn（防止数据泄漏至 Shadow AI）：https://learn.microsoft.com

2151 0

Canvas绘制可变换矩形的知识点及绘制思路

获取鼠标位置信息按下鼠标时鼠标的位置 // 按下鼠标 down = (self, e) => { const { offsetX, offsetY, layerX, layerY } =...e; this.mouseX = offsetX || layerX; this.mouseY = offsetY || layerY; console.log('mouseX,...this.isMove = true; }; 移动鼠标时鼠标的位置 // 移动鼠标 move = (self, e) => { const { offsetX, offsetY, layerX...posNo----', this.posNo); // console.log('矩形实例----', this.rect) let cur_x_point = offsetX || layerX...posNo----', this.posNo); // console.log('矩形实例----', this.rect) let cur_x_point = offsetX || layerX

1.3K2 0

【vue】 vue2 canvas实现在图片上选点，画区域并将坐标传递给后端

this.initImgCanvas(); }, drawImageClickFn(e) { let drawCtx = this.drawCtx; if (e.offsetX || e.layerX...e.layerX : e.offsetX; let pointY = e.offsetY == undefined ?...} }, drawImageMoveFn(e) { let drawCtx = this.drawCtx; if (e.offsetX || e.layerX...e.layerX : e.offsetX; let pointY = e.offsetY == undefined ?...e.layerX : e.offsetX; let pointY = e.offsetY == undefined ?

1791 0

three.js鼠标控制物体旋转

document.addEventListener("mouseout", onDocumentMouseOut, false); //按下去的时候鼠标相对位置 mouseXOnMouseDown = event.layerX...targetRotation; } function onDocumentMouseMove(event) { //移动的时候鼠标相对位置 mouseX = event.layerX...event.touches.length === 1) { event.preventaDefault(); mouseXOnMouseDown = event.touches[0].layerX...event.touches.length === 1) { event.preventaDefault(); mouseX = event.touches[0].layerX

17K5 3

了解 Javascript Event 对象

得到的数值感觉不是很准，了解一下就好... layerX / layerY layerX 和 layerY 都是只读属性。

8023 0

canvas之画板简单功能实现

//给画板新增按下事件 c.onmousedown=function(e){ //获取事件对象 var ev=window.event||e; //获取事件源的位置 var old_left=ev.layerX...（鼠标）添加移动事件 c.onmousemove=function(e){ //获取事件对象 var ev=window.event||e; //获取移动后事件源位置 var now_left=ev.layerX

9383 0

threejs 之复制删除正方体原

onDocumentMouseMove(event) { event.preventDefault(); //转换坐标至（-1,1）范围 mouse.set((event.layerX...function onDocumentMouseDown(event) { event.preventDefault(); mouse.set((event.layerX

1.4K2 0

three.js 事件交互

window.innerHeight ) * 2 + 1; 是针对全屏的情况，如果是一个div范围，窗口的宽度与高度要改成div的宽度与高度，event.clientX与ent.clientY也要改成event.layerX...selectObject.material.color.set("#69f"); selectObject = null; } var intersects = getIntersects(event.layerX

14.8K9 0

three.js 事件交互原

4.1K3 0

canvas动画-跟着鼠标移到的小球原

running) { clear() ball.x = e.layerX; ball.y = e.layerY; //ball.x = e.clientX;

6173 0

DOM 和 BOM 中的各种宽高属性

FireFox 不支持 ev.layerX/ev.layerY：事件发生时，鼠标点击位置相对于 document 或者设置了定位的事件源左上角（该点为原点）的坐标。...仅 FireFox 支持，要想使 layerX 与 offsetX 相等，必须给事件源设置定位。 ev.pageX/ev.pageY 事件发生时，鼠标点击位置相对于页面左上角（该点为原点）的坐标。

2.5K1 0

canvas-颜色选择器原

none" }; var color = document.getElementById("color"); function pick(event) { var x = event.layerX

1.2K5 0

JS高级拖动技术 setCapture，releaseCapture

drag(dv){ dv.οnmοusedοwn=function(e){ var d=document; e = e || window.event; var x= e.layerX

6K1 0

点击加载更多

关于offsetX、layerX、clientX、screenX以及pageX

js鼠标事件 clientX、clientY、offsetX、offsetY、layerX、layerY、pageX、 pageY、screenX、screenY「建议收藏」

JavaScript 获取鼠标及元素在页面上的位置

简单拖拽实现

client profile_clienttop

layerXlayerY与offsetXoffsetY区别

js获取鼠标当前位置坐标

2025年数据安全风险：员工把数据“喂给”第三方 AI？——基于流式网关 × 分级响应 × 审计闭环的 AI-DLP 实战方案

Canvas绘制可变换矩形的知识点及绘制思路

【vue】 vue2 canvas实现在图片上选点，画区域并将坐标传递给后端

three.js鼠标控制物体旋转

了解 Javascript Event 对象

canvas之画板简单功能实现

threejs 之复制删除正方体原

three.js 事件交互

three.js 事件交互原

canvas动画-跟着鼠标移到的小球原

DOM 和 BOM 中的各种宽高属性

canvas-颜色选择器原

JS高级拖动技术 setCapture，releaseCapture

相关资讯

热门标签

活动推荐

运营活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐