首页
学习
活动
专区
工具
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

Android Scroll分析

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

80220
  • 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。 ?

    46420

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

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

    2.2K10

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

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

    51710

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

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

    1.6K30

    vue 基于html5 drag drap拖放

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

    1.4K00

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

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

    1K20

    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; 接下来说一说offsetXoffsetY属性 offsetX...当我们点击test按钮时候触发onclick事件,这里test这个按钮就是事件源,所以通过offsetXoffsetY获取坐标值就是相对于 test按钮这个事件; Test按钮自身宽100px...第一次鼠标是接近test按钮左上角点击 ? ? 相信看到这里应该能明白offsetXoffsetY是获取什么值了吧,获取就是鼠标相对test这个按钮x坐标y坐标

    1.1K40

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

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

    55740

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

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

    2.9K81

    【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.4K110

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

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

    95210

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

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

    49461

    【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

    Qt编写自定义控件67-通用无边框

    一、前言 之前一篇文章写过一个通用移动控件,作用就是用来传入任意widget控件,可以父类容器自由移动。...我们平时做项目中,为了U界面的美观,很多会采用自定义无边框窗体来处理,自己美化标题栏等,都会面临一个相同问题,就是设置好自定义无边框窗体以后,要自己处理窗体移动拉伸,如果有多个无边框窗体,很多人会想到每个地方都写重复代码来实现移动或者拉伸...QDialog窗体可以通过设置一个属性sizeGripEnabled来实现右下角拉伸,这个还不足以满足所有的需求,很多时候我们还需要在四个角上下左右都能拉伸大小,这个就需要重写了,安装事件过滤器...,识别到鼠标移动到某个区域,鼠标形状自动变化,然后识别是否已经按下,按下的话做对应处理,对应处理核心就是重新设置窗体XY轴坐标大小。...强烈推荐程序员自我修养规划系列书《大话程序员》《程序成长课》《解忧程序员》,受益匪浅,受益终生!

    99320
    领券