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。
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
作为一个前端开发时刻想着，怎么把自己写的东西，丢到自己的服务器上面，然后展示给别人看。下面我就简单直白的写下，这篇文章主要给大家介绍了关于nginx配置React静态页面的方法教程,需要的朋友可以参考下。2017-11-11
React useMemo和useCallback的使用场景
这篇文章主要介绍了React useMemo和useCallback的使用场景，帮助大家更好的理解和学习使用React框架，感兴趣的朋友可以了解下2021-04-04
Hooks 发布之后，函数组件能拥有自己的 state，React提供了很多内置的Hooks，这篇文章就来和大家介绍一下useState 和 useEffect的使用，需要的可以参考一下2023-06-06
这篇文章主要介绍了详解react服务端渲染（同构）的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
React-Native之TextInput组件的设置以及如何获取输入框的内容
这篇文章主要介绍了React-Native之TextInput组件的设置以及如何获取输入框的内容问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
这篇文章主要介绍了vant2 自动检查表单验证 -validate,本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-10-10
这篇文章主要给大家介绍了React优雅的捕获并处理渲染异常方式,文章通过代码示例给大家介绍的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下2023-11-11
React.forwardRef的API中ref必须指向dom元素而不是React组件，通过一段示例代码给大家介绍了React forwardRef使用方法及注意点还有一些特殊情况分析，感兴趣的朋友跟随小编一起看看吧2021-06-06
这篇文章主要介绍了React Native 通告消息竖向轮播组件的封装，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-10-10
这篇文章主要介绍了使用react context 实现vue插槽slot功能，文中给大家介绍了vue的slot的实现方法,需要的朋友可以参考下2019-07-07
最新评论