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