首页
学习
活动
专区
工具
TVP
发布
您找到你想要的搜索结果了吗?
是的
没有找到

JS之clientX,clientY,screenX,screenY,offsetX,offsetY区别测试

首先需要知道clientX,clientY,screenX,screenY,offsetX,offsetY 是鼠标事件对象下的几个属性....之前也一直对这些属性搞的稀里糊涂,看文档上说的也是不太理解,反正看完一头雾水,所以自己动手亲自测试了一下;说一下自己的理解;clientX,clientY,screenX,screenY,offsetX...当我的鼠标移动到div的右下角的时候,screeX是200px,screenY是185px,因为div本身的宽度我定义的时200px,高度100px; 接下来说一说offsetX和offsetY属性 offsetX...当我们点击test按钮的时候触发onclick事件,这里test这个按钮就是事件源,所以通过offsetX和offsetY获取的坐标值就是相对于 test按钮这个事件源的; Test按钮自身的宽100px...相信看到这里应该能明白offsetX和offsetY是获取的什么值了吧,获取的就是鼠标相对test这个按钮的x坐标和y坐标

92440

javascript坐标:event.x、event.clientX、event.offsetX、event.screenX 用法

offsetX 设置或获取鼠标指针位置相对于触发事件的对象的 x 坐标。 offsetY 设置或获取鼠标指针位置相对于触发事件的对象的 y 坐标。...offsetx:设置或者是得到鼠标相对于目标事件的父元素的内边界在x坐标上的位置。...nwindow.event.y:"+window.event.y+"nevent.clientX:"+event.clientX+"nevent.clientY:"+event.clientY+"nevent.offsetX...:"+event.offsetX+"nevent.offsetY:"+event.offsetY+"nwindow.event.screenX:"+window.event.screenX+"nwindow.event.screenY...keyCode 设置或检索与引发事件的关键字相关联的Unicode关键字代码 该属性与onkeydown onkeyup onkeypress一起使用 如果没有引发事件的关键字,则该值为0 offsetX

1.6K30

2021-10-17 JS使模板元素进行移动(拖拽模板元素)

过程 设置目标元素的top,left,就需要想法计算top,left 1、第一步获取offsetX(Y) 如图说明: 点1、鼠标点击地方 点2、浏览器最左上角 线段3、初始状态下的整个目标元素的初始left...线段4、鼠标点击时的clientX 第一步,计算一个鼠标点击时的,点击点到元素内部的offsetX(也就是线段4-线段3这段距离),懂Js的会说,用js的点击事件e.offsetX不就行吗?...所以计算offsetX是:offsetX = e.clientX - el.left (解释:鼠标初始点击时的位置 减去 元素本来的left值) 第二步,通过鼠标移动事件的e.clientX计算目前目标元素的...left值: 其实很简单:left = e.clientX - 第一步计算的offsetX 上面仅仅计算了left,top同样的道理。...const offsetX = ref(0); const offsetY = ref(0); const containerCpt = getComputedStyle(container

2.3K20
领券