react事件對象無法獲取offsetLeft,offsetTop,X,Y等元素問題及解決
更新時間：2022年08月08日 14:27:42 作者：前端常春藤
這篇文章主要介紹了react事件對象無法獲取offsetLeft,offsetTop,X,Y等元素問題及解決方案，具有很好的參考價值，希望對大家有所幫助。
react事件對象無法獲取offsetLeft,offsetTop,X,Y等元素
react獲取到的事件缺少了部分一些屬性，和原生事件對象不同
如圖：
解決方法
事件中使用：
e.nativeEvent
這是一個比較坑的地方，應(yīng)該是react的事件對象沒有包含一些原生eventDom的屬性。
獲取offsetLeft，offsetTop值不準的原因
遇坑總結(jié)
決定offsetLeft、offsetTop的唯一因素是當(dāng)前節(jié)點和offsetParent節(jié)點的偏移關(guān)系。
也就是說只與offsetParent有關(guān)，那么怎么確定一個元素的offsetParent呢？
一個元素的offsetParent可以是以下其中之一：
- 1.具有position屬性（除了static值以外，而position默認值為static）的最近父元素；
- 2.最近的table，table cell父元素；
- 3.根節(jié)點元素；
- 4.設(shè)置了動畫transform:translate的最近父元素；
所以當(dāng)計算二個元素（已經(jīng)渲染到頁面）的相對距離時，遍歷所有二個元素之間的所有Parent元素offsetTop之和即可，二個元素之間的所有Parent與Child之間一定要確保是對應(yīng)的offsetParent。
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
useState通過在函數(shù)組件里調(diào)用它來給組件添加一些內(nèi)部state,下面這篇文章主要給大家介紹了關(guān)于React中useState的使用方法及注意事項的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-08-08
本文全面介紹了在React中處理異步操作的方法、最佳實踐及常見坑點,涵蓋數(shù)據(jù)獲取、延時任務(wù)、用戶交互、動畫和效果等典型場景,并提供了如useEffect、AbortController、ReactQuery等具體實現(xiàn)示例,感興趣的朋友一起看看吧2025-03-03
這篇文章主要介紹了react hooks實現(xiàn)原理,文中給大家介紹了useState dispatch函數(shù)如何與其使用的Function Component進行綁定，實例代碼給大家介紹的非常詳細，需要的朋友可以參考下2022-10-10
react如何實現(xiàn)側(cè)邊欄聯(lián)動頭部導(dǎo)航欄效果
這篇文章主要介紹了react如何實現(xiàn)側(cè)邊欄聯(lián)動頭部導(dǎo)航欄效果，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
React Native 混合開發(fā)多入口加載方式詳解
這篇文章主要介紹了React Native 混合開發(fā)多入口加載方式詳解，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
useSWR 是一個 React Hooks,是 HTTP 緩存庫 SWR 的核心方法之一,SWR 是一個輕量級的 React Hooks 庫,通過自動緩存數(shù)據(jù)來實現(xiàn) React 的數(shù)據(jù)獲取,本文給大家介紹react:swr接口緩存案例詳解,感興趣的朋友一起看看吧2023-11-11
詳解關(guān)于react-redux中的connect用法介紹及原理解析
本篇文章主要介紹了詳解關(guān)于react-redux中的connect用法介紹及原理解析，非常具有實用價值，需要的朋友可以參考下2017-09-09
react 不用插件實現(xiàn)數(shù)字滾動的效果示例
這篇文章主要介紹了react 不用插件實現(xiàn)數(shù)字滾動的效果示例，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
這篇文章主要介紹了antd之RangePicker設(shè)置默認值方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
這篇文章主要介紹了React項目經(jīng)驗總結(jié),本文給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-07-07