react事件对象无法获取offsetLeft、offsetTop、X、Y等元素解决方法

已于 2022-06-29 06:51:02 修改
阅读量1.8k 收藏 12
点赞数 4
分类专栏： React 文章标签： javascript react typescript 前端 组件
于 2022-05-26 01:20:02 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46995864/article/details/124977236
版权
针对React事件对象缺失原生属性的问题，本文介绍了一种通过e.nativeEvent获取完整事件属性的方法。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

react获取到的事件缺少了部分一些属性，和原生事件对象不同，如图：

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
*

解决方法

事件中使用：

e.nativeEvent

在这里插入图片描述
在这里插入图片描述
这是一个比较坑的地方，应该是react的事件对象没有包含一些原生eventDom的属性。

（含react-draggable库以及相关BUG如何解决）固定在左上方某盒子内（如按钮）添加可拖动功能，使用react hook语法实现
weixin_50236973的博客
03-28 495
（含react-draggable库来实现这个功能）固定在左上方某盒子内（如按钮）添加可拖动功能，使用react hook语法实现
React 使用onMouseDown、onMouseMove、onMouseUp完美实现悬浮球拖动
qq_44229380的博客
03-04 8554
近期需要做一个全局的小助手，类似于360加速球的效果，在网页中就需要组件的拖动。但是使用onDrag实现拖动，需要设置放置的容器，否则拖动时会出现禁止标志，很难受。所以想着给组件加上鼠标事件，通过鼠标事件来改变组件的绝对位置实现拖动。 1.实现组件的拖动 import React, { useRef, useEffect, useState } from 'react'; const onMouseDown = (ref, setDraggable) => (e) => { // 记录鼠
offsetTop无法获取到标签与body的距离
hua_ban_yu的博客
09-02 4997
在项目开中使用offsetTop获取当前标签与body标签的距离，发现offsetTop获取的高度为0。 通过查询offsetParent属性返回值： （1）.返回距离当前元素最近的采用定位祖先元素。 （2）.如果祖先元素中没有采用定位的元素，则返回body元素。 使用offsetTop获取的标签距离的父级元素使用了position进行定位，导致获取到的获取的实际距离不是从body到当前对...
触摸事件获取不到e.offset属性解决办法
PIOnly的博客
03-30 1391
触摸屏时获取不到e.offsetX属性以及元素的clientLeft 或 scrollLeft的值，所以改用pageX(表示触摸点相对于网页左上角的水平位置)减去getBoundingClientRect().left(获取图片元素相对于视窗左上角的水平位置)的值代替
react鼠标在当前元素的坐标offsetX,Y
皮蛋solo粥的博客
04-15 745
<div onMouseMove={rrr} className='right'> const rrr = (e:any)=>{ console.log(e.nativeEvent.offsetX) } 今天做一个img跟随鼠标在某一个元素里位移，在js和vue都能取到的offsetX,Y是undifine了，我人麻了，react真是特立独行让人乱到离谱，他把offset封装在了nativeEvent里面，害得我好一顿找， ...
解决react项目中event对象打印的值为null
Djj_Alice的博客
12-22 1787
在做react项目的时候，发现event打印到控制台上的属性值均为null，如下图所示： 觉得挺奇怪的，怎么可能是null呢，但是在方法里面竟然又能获取到值，这样对调试很不利，有木有？ 其实真正的原因是因为React里面的事件并不是真实的DOM事件，而是自己在原生DOM事件上进行了封装与合成。 合成事件是由事件池来管理的，合成事件对象可能会被重用，合成事件的所有属性也会随之...
react-reactlistviewstickyheaderReactlistview能够固定选中的标题
08-15
`react-listview-sticky-header`库提供了一些可配置的属性，比如`scrollContainer`用于指定滚动的容器，`stickyClassName`可以设置固定元素的CSS类名，以及`offsetTop`和`offsetLeft`用来调整固定元素的位置。...
掌握技巧：如何在网页中准确获取元素坐标
- 通过获取元素的`offsetLeft`, `offsetTop`, `offsetWidth`和`offsetHeight`等属性，可以得到元素相对于其定位上下文的位置和尺寸信息。 3. **JavaScript 中的坐标计算**： - JavaScript 可以用来动态计算和获取...
基于React.js实现原生js拖拽效果引发的思考
11-23
记录下被拖拽元素的初始坐标，通常是通过`event.clientX`和`event.clientY`获取鼠标位置，同时可能还需要存储元素的当前位置（`offsetTop`和`offsetLeft`）。 2. **移动过程中更新位置**： 当`onmousemove`事件...
reactnative 获取定位_React Native：获取元素的位置
weixin_39856269的博客
12-20 638
I am styling an Image component with flexbox to be in the center of the screen which works pretty well. Now I want a second Image component to be displayed directly on the top of the first one. The se...
类型“EventTarget”上不存在属性“clientHeight”。
KaiSarH
07-11 3399
类型“EventTarget”上不存在属性“clientHeight”。
节点属性、offset*获取元素尺寸、offsetLeft获取元素定位
YY的博客
10-20 1148
offsetWidth、offsetHeight、clientWidth、clientHeight、offsetLeft、offsetTop
refs 获取元素位置_vue（js） 拖拽改变排序（数组）位置（原理及代码）
weixin_33669611的博客
02-06 1913
先说实现的逻辑（针对操作逻辑对应的事件讲解）：onmousedown(鼠标按下事件)： 重新获取操作盒子的大小，以及坐标（考虑到客户有可能变更浏览器大小的情况）。获取操作盒子顶部距离获取操作盒子左边距离获取操作盒子的高度获取操作盒子的宽度鼠标按下获取到按下的item数据，所在item的坐标，（让随鼠标移动的临时dom所在鼠标的位置完全对应上按下时的位置，用户体验像真复制出来的一样）获取按下时数组...
Javascript学习笔记18 高级技巧（自定义事件 拖放）
zjw_python的博客
05-03 453
自定义事件 事件是一种叫做观察者的设计模式，观察者模式由两类对象组成：主体和观察者。主体负责发布事件，同时观察者知道通过订阅这些事件来观察主体。主体可以独自存在并正常运作即使观察者不存在。在DOM结构中，DOM元素便是主体，事件处理代码便是观察者 自定义事件背后的概念是创建一个管理事件的对象，让其他对象监听那些事件。 function EventTarget(){ //用于管理事...
获得鼠标在对象中的坐标，兼容IE/chrome
桐花万里路
08-22 512
//获得鼠标在对象中的坐标 d$.getPos=function(obj){ return { x: event.clientX - $(obj).offset().left + (document.body.scrollLeft?document.body.scrollLeft:document.documentElement.scrollLeft) - 1, y: event.clie
javascript中top、clientTop、scrollTop、offsetTop的讲解
weixin_30629977的博客
11-04 329
12.11.04：内容全部都是转自网上看到的，有两篇，还未整理，图片是我自己加上颜色的，比刚开始的好识别了很多。 scrollHeight: 获取对象的滚动高度。 scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 scrollWidth:获取对象的滚动宽度 ...
在写原生js轮播图的时候，无法获取到left属性
小白冲的博客
12-07 565
在写原生轮播图的时候，发现一个问题： 必须在html标签内的style="left:0px"，写这个，才能通过parseInt(box.style.left)属性, 如果不写，可以通过box.offsetLeft 来获取，但要给父元素添加相对定位属性，不然 获取的是相对于body的偏移属性。 后来在网上找到了原因： ubox.style.xxx只能取到通过内嵌方式设置的样式值（写在标签内
offsetLeft，offsetTop，scrollLeft，scrollTop
y_mo的专栏
12-25 1237
对offsetLet,offsetTop,scrollLeft,scrollTop几个方法的理解 Posted on 2006-11-20 16:15 X-阿土 阅读(252) 评论(0)  编辑  收藏 所属分类: JavaScript开发 <!--<rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

sorryhc

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值