react事件对象无法获取offsetLeft,offsetTop,X,Y等元素问题及解决
更新时间：2022年08月08日 14:27:42 作者：前端常春藤
这篇文章主要介绍了react事件对象无法获取offsetLeft,offsetTop,X,Y等元素问题及解决方案，具有很好的参考价值，希望对大家有所帮助。
react事件对象无法获取offsetLeft,offsetTop,X,Y等元素
react获取到的事件缺少了部分一些属性，和原生事件对象不同
如图：
解决方法
事件中使用：
e.nativeEvent
这是一个比较坑的地方，应该是react的事件对象没有包含一些原生eventDom的属性。
获取offsetLeft，offsetTop值不准的原因
遇坑总结
决定offsetLeft、offsetTop的唯一因素是当前节点和offsetParent节点的偏移关系。
也就是说只与offsetParent有关，那么怎么确定一个元素的offsetParent呢？
一个元素的offsetParent可以是以下其中之一：
- 1.具有position属性（除了static值以外，而position默认值为static）的最近父元素；
- 2.最近的table，table cell父元素；
- 3.根节点元素；
- 4.设置了动画transform:translate的最近父元素；
所以当计算二个元素（已经渲染到页面）的相对距离时，遍历所有二个元素之间的所有Parent元素offsetTop之和即可，二个元素之间的所有Parent与Child之间一定要确保是对应的offsetParent。
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
useState通过在函数组件里调用它来给组件添加一些内部state,下面这篇文章主要给大家介绍了关于React中useState的使用方法及注意事项的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-08-08
本文全面介绍了在React中处理异步操作的方法、最佳实践及常见坑点,涵盖数据获取、延时任务、用户交互、动画和效果等典型场景,并提供了如useEffect、AbortController、ReactQuery等具体实现示例,感兴趣的朋友一起看看吧2025-03-03
这篇文章主要介绍了react hooks实现原理,文中给大家介绍了useState dispatch函数如何与其使用的Function Component进行绑定，实例代码给大家介绍的非常详细，需要的朋友可以参考下2022-10-10
这篇文章主要介绍了react如何实现侧边栏联动头部导航栏效果，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-03-03
这篇文章主要介绍了React Native 混合开发多入口加载方式详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-09-09
useSWR 是一个 React Hooks,是 HTTP 缓存库 SWR 的核心方法之一,SWR 是一个轻量级的 React Hooks 库,通过自动缓存数据来实现 React 的数据获取,本文给大家介绍react:swr接口缓存案例详解,感兴趣的朋友一起看看吧2023-11-11
详解关于react-redux中的connect用法介绍及原理解析
本篇文章主要介绍了详解关于react-redux中的connect用法介绍及原理解析，非常具有实用价值，需要的朋友可以参考下2017-09-09
这篇文章主要介绍了react 不用插件实现数字滚动的效果示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-04-04
这篇文章主要介绍了antd之RangePicker设置默认值方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-12-12
这篇文章主要介绍了React项目经验总结,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-07-07
最新评论