首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

为什么我在事件处理程序中得到了错误的offsetX和offsetY?

在事件处理程序中得到错误的offsetX和offsetY可能是由于以下几个原因导致的:

  1. 坐标系问题:offsetX和offsetY是相对于事件目标元素的坐标值。如果事件处理程序绑定在父级元素上,而不是目标元素上,那么offsetX和offsetY将相对于父级元素而不是目标元素计算。解决方法是将事件处理程序绑定在目标元素上,或者通过使用event.target属性来获取目标元素并计算相对位置。
  2. CSS变换:如果目标元素存在CSS的transform属性,如旋转、缩放、平移等,那么offsetX和offsetY将根据变换后的元素位置计算。这可能导致得到错误的值。解决方法是通过使用事件对象的clientX和clientY属性结合目标元素的getBoundingClientRect()方法来计算准确的坐标位置。
  3. 元素定位问题:如果目标元素的position属性为relative或absolute,并且父级元素也存在定位属性(如position: relative或position: absolute),那么offsetX和offsetY将相对于父级元素计算。这可能导致得到错误的值。解决方法是确保目标元素和父级元素的定位属性正确设置,或者通过使用事件对象的pageX和pageY属性结合目标元素的offsetLeft和offsetTop属性来计算准确的坐标位置。
  4. 页面缩放:如果页面处于缩放状态(如浏览器窗口缩放或移动设备缩放),那么offsetX和offsetY将根据缩放后的页面位置计算。这可能导致得到错误的值。解决方法是通过使用事件对象的pageX和pageY属性结合页面的缩放比例来计算准确的坐标位置。

综上所述,出现错误的offsetX和offsetY可能是因为坐标系问题、CSS变换、元素定位问题或页面缩放等原因导致的。解决方法需要根据具体情况进行调整和计算。

相关搜索:为什么我不能双击按钮在Silverlight 中创建事件处理程序?Outlook事件编辑和保存选项单击-要在我的外接程序中触发的事件处理程序我在处理R数据编程中的FOR和IF函数时遇到了麻烦我需要帮助理解JavaScript中的事件处理程序和函数?为什么我无法在命令处理程序中捕获Discord.js错误?在我的程序中,为什么"if和else语句“会出现分割错误?我在python中得到了这个与randint()和randrange()相关的错误。为什么我从“黑客:剥削的艺术”中得到了exploit_notesearch程序中的分段错误?为什么我在一些输入的c代码中得到了错误的答案?为什么我的DataSource中的Error事件在发生错误时不触发?为什么我的全局错误处理程序在我的Angular应用程序中被调用了两次?在setState之后,事件侦听器处理程序中的状态值错误为什么我的事件处理程序会导致"不是函数"错误,但是可以从Firebug控制台运行?为什么我可以在Python shell中使用请求,但是在Django中我得到了no module found的错误?为什么我的vue应用程序在父iframe中触发onload事件我在我的程序中得到了一个分段错误,但不清楚是如何发生的我在这段HTML代码中遇到了在PHP和JS之间链接变量的错误为什么我在编译时遇到了关于在代码中丢弃限定符的g ++错误?如何在Kotlin中对多个按钮使用一个事件处理程序(我已经在java中看到了switch语句)在我的IaC堆栈中获取自动存储桶策略的处理程序错误
相关搜索:
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

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

线段4、鼠标点击时的clientX 第一步,计算一个鼠标点击时的,点击点到元素内部的offsetX(也就是线段4-线段3这段距离),懂Js的会说,用js的点击事件e.offsetX不就行吗?...这就是我说的,具体业务得具体分析,我想点击header部分移动整个body,但是现在有个padding,通过e.clientX获取的值不会包含这个padding,导致如果直接使用这个e.clientX的话...所以计算offsetX是:offsetX = e.clientX - el.left (解释:鼠标初始点击时的位置 减去 元素本来的left值) 第二步,通过鼠标移动事件的e.clientX计算目前目标元素的...- container元素默认的left = OffsetX const offsetX = ref(0); const offsetY = ref(0); const containerCpt...其中用到了一个useMobile,判断是不是手机宽度,删除这段代码就行(line18-23)。

2.5K20

Flink中的事件时间和处理时间有什么区别?为什么事件时间在流计算中很重要?

Flink中的事件时间和处理时间有什么区别?为什么事件时间在流计算中很重要?...Flink中的事件时间(Event Time)和处理时间(Processing Time)是两种不同的时间概念,用于对流数据进行处理和分析。...在Flink中,可以通过指定时间戳和水位线来处理事件时间。时间戳用于为每个事件分配一个时间戳,而水位线用于表示事件时间的进展。Flink使用水位线来处理延迟数据和乱序数据,以确保结果的准确性。...在Flink中,默认使用处理时间进行处理,即使用数据到达流处理引擎的时间作为事件的时间戳。...在一些应用场景中,数据的时间戳非常重要,例如金融交易、日志分析等。使用事件时间可以确保结果的准确性,避免数据乱序和延迟带来的问题。

12610
  • Android Scroll分析

    在此之前,我们需要先了解下Android中的窗口坐标体系和屏幕的触控事件MotionEvent。 ---- Android坐标系 所谓滑动,正是相对于参考系的运动。...在触摸事件中,通过getX()和getY()所获得的坐标就是视图坐标系中的坐标。 ---- 触控事件-MotionEvent 触控事件MotionEvent在用户交互中,占据着举足轻重的位置。...MotionEvent.ACTION_UP: // 处理输入的离开事件 break; } return true ; } 在不涉及多点操作的情况下...); 注意事项: 通过getLayoutParams获取LayoutParams时,需要根据View在父布局中的类型来设置不同的类型,比如这里我们把View放到了RelativeLayout中,那么就是...---- scrollTo和scrollBy 概述 在一个View中,系统提供了scrollTo 、scrollBy两种方式来改变一个View的位置。

    81520

    View·dispatchTouchEvent 源码分析(四)

    上节概述 从上节View·dispatchTouchEvent 源码分析(三)中,我们分析了 ACTION_DOWN 事件的派发和拦截过程。 接下去,我们分析后续的事件是怎么被处理的!...3、 在processPointerEvent内部调用是 mView.dispatchPointerEvent(event);,将事件进行处理。...,执行事件派发 // 【代码贴在第8小节里面】 } } 8、之前DecorView的实例在处理ACTION_DOWN事件时,mFirstTouchTarget...经过dispatchTouchEvent的处理,得到了如下图的TouchTarget 链—— 3、2、1,同时使用mFirstTouchTarget 指向3这个位置。 ?...ACTION_DOWN事件的派发 10、确定了3、2、1这条链之后,在第8点中就能直接对这条链进行事件派发,派发顺序是3、2、1。 ?

    47320

    Threejs入门之二十二:Threejs中的屏幕坐标转标准设备坐标

    在上一节中,我们在监听鼠标移动事件时,将其坐标范围处理为了[-1,1]的范围,使用如下代码document.addEventListener('mousemove',function( event ).../ window.innerHeight ) * 2 + 1 //处理为 -1 ~ 1 的范围 }) 那么我们为什么要这么转换呢?...HTML中的坐标系有前端基础的人都知道HTML中有四个坐标系,分别是screen,page,client和offset,他们用于描述DOM元素的Box尺寸和MouseEvent中的位置 1 screen...offsetX:鼠标点击位置相对于触发事件对象的水平距离。 offsetY:鼠标点击位置相对于触发事件对象的垂直距离。....offsetX和.offsetY坐标转化为标准设备坐标坐标// 坐标转化公式addEventListener('click',function(event){ const px = event.offsetX

    2.3K10

    vue 中基于html5 drag drap的拖放

    事情是这样的,右边有各种控件,可以拖动到右边自由区,在自由区内可以随意拖动。 案例一: 开始的我,so easy!...通过绑定元素的mousedown 事件,监听鼠标的mousemove,和mouseup 事件,于是我轻松实现了同一区域内元素可以拖着跑,上代码!...以上代码并不能满足需要,要左右布局,左边的拖到右边,在右边区域随便拖动。 案例二: 好吧,首先我来布个局,左右布局,给元素绑定事件,上代码!...(this.offsetX + '-' + this.offsetY) }, draging (e) { // console.log('拖动中') var x...,无法读取鼠标的坐标,pageX和pageY都变为0 if (x === 0 && y === 0) { return // 不处理拖动最后一刻X和Y都为0的情形

    1.4K00

    vue-grid-layout数据可视化图表面板优化过程所遇问题汇总

    ()返回的数据为空,以及在dragover时dataTransfer中的types不为0了,因为在除了dragstart,drop以外的事件,包括dragover,dragenter,dragleave...所以在dragover,dragenter,dragleave中做得更多的应该是对数据的处理,而不是应用效果。...dragenter和dragover事件的默认行为是拒绝接受任何被拖放的元素。因此,我们必须阻止浏览器这种默认行为。...发行也阻止默认事件了,但是我使用了节流事件,发现不行:把 e.preventDefault()提取出来就可以,代码如下:clientX、offsetX、screenX、pageX、x、y、clientLeft...x,y坐标所以在drogover 中,直接获取offsetY、offsetX 即可:const { offsetY: top, offsetX: left } = e;el.dragging.data

    1.6K30

    解锁前端难题:亲手实现一个图片标注工具

    缩放 实现图片缩放功能,我们需要了解两个关键的知识点:如何监听缩放事件和如何实现图片缩放。 先来看第一个,我用的是 Mac,在 Mac 上可以通过监听鼠标的滚轮事件来实现缩放的监听。...,我们需要实现鼠标按下、移动和抬起时的事件处理,以便在用户拖动鼠标时动态地绘制一个矩形标注。...这个变量将包含标注的起始坐标、宽度和高度等信息: let drawingRect = null; 接下来,我们需要实现鼠标按下、移动和抬起的事件处理函数: mousedown中我们需要记录鼠标按下时,...mouseup时,需要处理添加操作,将矩形添加到rects中,在这里我做了一个判断,如果矩形的宽高小于 1,则不添加,这是为了避免在鼠标原地点击时,误添加图形的问题。...鼠标事件的处理,如点击、拖拽、滚轮缩放等。 几何计算,如点是否在矩形内、旋转角度的计算等。 希望这个实例能够为你提供一些启发和帮助,让你在实现自己的图片标注工具时有一个参考和借鉴。

    90910

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

    x轴的位置; screenY:当鼠标事件发生时,鼠标相对于显示器屏幕y轴的位置; offsetX:当鼠标事件发生时,鼠标相对于事件源x轴的位置 offsetY:当鼠标事件发生时,鼠标相对于事件源y轴的位置...:"+ e.offsetX +",offsetY : "+ e.offsetY; }*/ 这里我需要解释一下我上面说的“浏览器有效区域”这句话,下图中黑色边框区域就是浏览器的有效区域...当我的鼠标移动到div的右下角的时候,screeX是200px,screenY是185px,因为div本身的宽度我定义的时200px,高度100px; 接下来说一说offsetX和offsetY属性 offsetX...当我们点击test按钮的时候触发onclick事件,这里test这个按钮就是事件源,所以通过offsetX和offsetY获取的坐标值就是相对于 test按钮这个事件源的; Test按钮自身的宽100px...第一次鼠标是在接近test按钮的左上角点击 ? ? 相信看到这里应该能明白offsetX和offsetY是获取的什么值了吧,获取的就是鼠标相对test这个按钮的x坐标和y坐标

    1.3K40

    CoreText实现图文混排之点击事件

    [self ClickOnStrWithPoint:location];//响应字符串事件 } 这里老司机还是要解释一下,为什么我要设置成优先响应图片的事件呢?...即使是一段文字范围我们赋值了文字的响应事件,然后在范围中插入了图片并且赋予了图片响应事件,我们往往是希望图片响应其自己的事件。...这四句我就不多说了,获取所有CTLine和其原点。..., offsetY, offsexX2 - offsetX, height);//返回一个字符的Frame } 根据注释就能很轻易的看懂这段代码,不过可能有几个方法不熟悉,我来介绍下。...通过以上方法,你就拿到了每一个字符的frame了。 可以返回至上一层了=。=喘了一口气。。。 接受到字符的frame,还是判断点击位置是否在frame中,如果在,则响应点击事件并结束方法。

    1K20

    当你按下方向键,电视是如何寻找下一个焦点的

    我工作的第一家公司主要做的是一个在智能电视上面运行的APP,其实就是一个安卓APP,也是混合开发的应用,里面很多页面是H5开发的。...为什么时隔多年会突然想起这个呢,其实是因为最近在给我开源的思维导图添加方向键导航的功能时,想到其实和电视聚焦功能很类似,都是按方向键,来计算并且自动聚焦到下一个元素或节点: 那么如何寻找下一个焦点呢,结合我当时用的焦点库的原理...2.阴影算法 该算法也是分别处理四个方向,但是和前面的第一种算法相比,额外要求节点在指定方向上的延伸需要存在交叉,延伸处可以想象成是节点的阴影,也就是名字的由来: 找出所有存在交叉的节点后也是从中找出距离最近的一个节点作为下一个聚焦节点...match = offsetY offsetY offsetX && offsetY offsetX } else if (dir === 'Down') {...match = offsetY > 0 && -offsetY offsetX && offsetY > offsetX } if (match

    58040

    HarmonyOS 开发实践 —— 基于手势的图片预览与缩放

    onActionUpdate和onActionEnd回调中修改scale参数,进行图片缩放处理。...核心代码1、在PanGesture手势的onActionUpDate回调中获取偏移位置,计算拖拽过程中左右两边分别是否已到边界。...;    this.offsetY = NEWOFFSET_Y;  }}2、通过绑定onTouch事件,在滑动的过程中根据手指方向和是否到达边界通过isPageChangeOnBoundary方法判断后分别执行...方法中根据传入的手指滑动方向和拖动到达的边界方向来判断返回,之后再分别调用不同场景下的方法处理逻辑,进行翻页或者拖动。...:点赞,转发,有你们的 『点赞和评论』,才是我创造的动力;关注小编,同时可以期待后续文章ing,不定期分享原创知识;想要获取更多完整鸿蒙最新学习知识点,可关注B站:码牛课堂;

    18610

    原生 JS 手写一个优雅的图片预览功能,带你吃透背后原理

    在监听事件中我们可以通过 event 对象获取各种属性,例如常用的 offsetX、offsetY 相对偏移量,clientX、clientY 距离窗口的横坐标和纵坐标等。...(对应 touchcancel 事件),我们必须在这里清空数组,这是容易被忽略的一点,原本 TouchEvent 中的 touches 并不需要处理。...图片在上一篇文章手写拖拽效果中我也讲到了如何在JS中使用数学方法计算两点间距离,下面介绍另一种常见的简洁写法,Math.hypot() 函数返回其参数的平方和的平方根:图片nd.y - start.y)...该属性在平时的业务代码中也可用于优化移动端性能、解决 touchmove 的 passive 报错等,这个我在之前另一篇文章中有提到,感兴趣可以看看:一行CSS提升页面滚动性能。...在本例的代码中这个CSS本身是没有意义的,为的只是触发css3硬件加速来提升性能,那为什么不直接使用 translate3d() 呢?

    3.5K81

    【Android】在任意位置弹出PopupWindow

    前言 在日常的开发中,经常会有弹框的操作。实现弹框有两种选,PopupWindow或者Dialog,这里就先忽略Dialog。...Gravity.CENTER:在showAsDropDown()中是跟 Gravity.LEFT一样,在showAtLocation()中Gravity.CENTER才有效果 得到效果...left.gif 查了下showAsDropDown(),发现只能在指定控件的下面弹出,总感觉少了点什么~~ 有时候我想弹在View的上面、左边、右边?怎么解? ?...尬 可能有机智的boy已经想到了showAsDropDown()中的另外两个参数,xoff、yoff。 要利用这两个参数,不过不建议在代码中直接写。为什么?...在PopupWindow中,先写个修改Window透明度的方法(注意,这边的mContext必须是Activity) /** * 控制窗口背景的不透明度 */ private

    4.5K110

    HarmonyOS 开发实践 —— 基于手势绑定的常见问题处理

    场景一:父子组件同时绑定手势的冲突处理效果图方案在默认情况下,手势事件为非冒泡事件,当父子组件绑定相同的手势时,父子组件绑定的手势事件会发生竞争,最多只有一个组件的手势事件能够获得响应,默认子组件优先识别通过...当父组件绑定了并行手势parallelGesture时,父子组件相同的手势事件都可以触发,实现类似冒泡效果(当前规格:当父组件和子组件同时绑定单击手势事件和双击手势事件时,父组件和子组件均只响应单击手势事件...效果图方案通过GestureEvent中开放出来的的velocityX和velocityY分别对应当前手势的x轴方向速度和y轴方向速度,通过离手时的速度计算惯性滑动的距离,通过动画animateTo来模拟惯性滑动的效果...核心代码手指上滑时:优先识别list组件自身滚动效果,当list滚动到临界值时,触发list组件的onReachEnd回调,在回调中修改自定义变量值;在并行手势parallelGesture的panGesture...回调,在回调中修改自定义变量值;在并行手势parallelGesture的panGesture手势的onActionUpdate回调中,进行逻辑判断以及对半模态页面的高度进行动态赋值为原先高度减去手势偏移量

    17220

    图形编辑器开发:参考线吸附效功能,让图形自动对齐

    可以看到,通过参照线,我们很容易就能实现各种对齐,比如两图形的底边和定边对齐、右下角和左上角对齐。 这在 以对齐为基本要素 的视觉设计中,是非常好用的功能。...在一条垂直线上的多个点,其 x 值是相同的,y 不同,我们 x 作为 key,y 的数组为 value,保存到 hLineMap 映射对象中。...标记需绘制参照线段 计算出了 offsetX 和 offsetY。 接下来要修正一下我们的 targetBbox。.../*************** 下水平的参考线 ************/ } 修正图形的 x、y 计算出的 offsetX 和 offsetY,记得拿去修正被移动目标图形的 x 和 y。...最后 总结一下,参考线吸附的实现,就是找出最近的垂直线和水平线,计算出 offsetX 和 offsetY,修正被移动图形的 x 和 y,并记录并绘制出最终重合的参考线。

    57561

    一篇文章搞懂前端事件监听

    这是我参与「掘金日新计划 · 6 月更文挑战」的第8天,点击查看活动详情 认识事件监听 前面我们讲到了JavaScript脚本和浏览器之间交互时,浏览器给我们提供的BOM、DOM等一些对象模型。...,进行一些事件的处理; Web当中,事件在浏览器窗口中被触发,并且通过绑定到某些元素上或者浏览器窗口本身,那么我们就可以 给这些元素或者window窗口来绑定事件的处理程序,来对事件进行监听。...事件监听方式一:在script中直接监听; 事件监听方式二:通过元素的on来监听事件; 事件监听方式三:通过EventTarget中的addEventListener来监听; 事件监听的三种方式...事实上,还有另外一种监听事件流的方式就是从外层到内层(body -> span),这种称之为事件捕获(Event Capture); 为什么会产生两种不同的处理流呢?...:事件的类型; target:当前事件发生的元素; currentTarget:当前处理事件的元素; offsetX、offsetY:点击元素的位置; 常见的方法: preventDefault:

    1K10

    【C#】分享一个弹出容器层,像右键菜单那样召即来挥则去

    新增的DrawSizeGrip方法就是绘制方法,是protected virtual的,所以如果你看不上我画的这个,可以在子类重写该方法画你自己满意的(题外,画这个我还参考了VS2010的效果,不过是相反的...,例如输入一些东西、点选一个item之类的,可能像这样: 完了返回原窗体并获取刚刚的输入,这样做并没有什么问题,但在几天前我突然产生了一些想法:为什么非得有板有眼的弹出一个窗体给用户呢,是不是可以在按钮附近迅速呈现一个层来做这些事呢...要想获得值可能就得额外采取一些做法,例如响应弹出控件的关闭事件,或者把原窗体传入弹出控件完了在后者中做原本应该在原窗体中做的事~等等,办法当然有很多,但这都是因为只能Show带来的多余的事,有什么比在一个方法中弹出控件...最后无论是Show还是ShowDialog弹出来的浮动层,都可以像右键菜单那样通过在其它地方点鼠标使之消失,这里需要说明一下: 鼠标只会点在本程序内的窗体中时,让浮动层消失。...为什么要这样是因为要做到完全像右键菜单那样对全局鼠标敏感,需要全局钩子,这会增加代码量(性能且不说,没测过不妄言),而且我认为没必要全局敏感 浮动层消失是调用Hide方法,所以对于模式化打开的浮动层,会返回

    2.8K20

    View的滑动方式 详细介绍

    上图圆点是手指触摸点,蓝色的是MotionEvent的方法,点击事件走到onTouchEvent,获得点击事件的各种坐标:getX、getY是相对view;getRawX、getRawY是相对屏幕。...layout(getLeft() + offsetX, getTop() + offsetY, getRight() + offsetX, getBottom() + offsetY);..., getTop() + offsetY, getRight() + offsetX, getBottom() + offsetY); 每次移动都会调layout重新布局,也就是滑动的效果。...负值表示 view左边缘在view内容的左侧。 mScrollY:VIew上边缘和 view的内容(即view的子view)上边缘的距离。负值表示 view上边缘在view内容的上面。...6、Scroller Scroller是处理滑动效果的工具类,来实现有过度效果的弹性滑动(有个过程,不是瞬间完成的)。

    1K00
    领券