layerX_js layerx_如何设置'layerX‘和'layerY’的事件类型 - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

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

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

1.5K0 0

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

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

2.2K2 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/

3.2K6 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.2K4 0

client profile_clienttop

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

3021 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.6K5 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

15.4K5 3

js获取鼠标当前位置坐标

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

14.5K2 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

7922 0

了解 Javascript Event 对象

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

6333 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

7043 0

threejs 之复制删除正方体原

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

1.2K2 0

canvas-颜色选择器原

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

9715 0

JS高级拖动技术 setCapture，releaseCapture

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

5.2K1 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

3.8K3 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

14K9 0

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

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

4563 0

DOM 和 BOM 中的各种宽高属性

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

1.8K1 0

React：FrontendWiki前端维基项目&&用纯CSS实现树

this.state = { point: false, top: 0, left: 0, }; } pointShow(e) { let { layerX..., offsetX, offsetY } = e.nativeEvent; this.setState({ top: layerY || offsetY, left: layerX

5831 0

jquery 获取鼠标和元素的坐标点

获取当前鼠标相对浏览器的原点的坐标 $('div').mousemove(function(e) { var xx = e.originalEvent.x ||e.originalEvent.layerX

2.3K4 1

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭