DOM元素動態監聽

codercao 發布于2019-08-23 14:34 / 2585人閱讀

摘要：今天遇到一個一直認為很簡單的問題，真正接手后才知道這么可怕大體是這樣的，默認動態加載的應該是自動向下，當遇到頁面最下面應該自動向上渲染。動態生成的都是根據來監聽獲取元素的信息。

今天遇到一個一直認為很簡單的問題，真正接手后才知道這么可怕

大體是這樣的，默認動態加載的card應該是自動向下，當card遇到頁面最下面應該自動向上渲染。

動態生成的DOM都是根據id來監聽獲取元素的信息。

坑1：當時數據較少沒有考慮到card渲染方向，所以在頁面下面的時候card加載到了瀏覽器可視界面之外啦

入坑1：當我一開始碰到這個bug時，so easy！！！所以加了一個判斷條件，在函數@mouseenter獲取觸發點位置，然后加上一個頁面高度和頁面高度screen.height進行對比，然后對card進行移位，蒽，easy?。。?/p>

let rect = this.$el.getBoundingClientRect()

so,坑：很快，師傅過來啦，你這個寫死啦，擴展性不好！內心毫無波瀾，好，改成動態！

坑2：動態嘛，嗯嗯，就是換成動態判斷條件就行

進坑2：Google一下，百度一天，怎么檢查新生成的DOM元素是否超出可視頁面！結果搜到一堆判斷scroll滾動元素的邊境溢出！根本沒有智能的自動檢查函數，我平時也看到過有的網站是可以實現自動判斷，所以一定可以解決！證明只有程序袁才是萬能的，代碼，呵！

so,坑：表示師傅看不下去啦，“你根據ID，利用$nextTick獲得更新后的元素信息來獲取DOM的信息！”

坑3：調研一下$nextTick()函數，DOM更新后返回$nextTick()里的操作，蒽。 坑4：立馬開始獲取動態彈出card的id，嗯嗯嗯嗯，找到了，通過控制臺找到的，由于我用的是一個組件沒有使用ref來注釋，

出坑4：so，小case【找了兩個小時，自閉】，通過this.$rootDOM樹來查到元素id，這樣找到的id每次都是動態的啦！

進坑3：問題很快來了，我通過id獲取到元素的高度啦，但是每次順序不對啊，每次dom渲染后在找到更新dom的信息。。。又仔細看了一下this.$nextTick(),en,DOM更新后，函數返回操作！?。Q個思路，于是通過監控DOM樹的變化來在第一時間來獲取到dom變化的id并且獲取DOM信息

let dom=document.getElementById(this.$root.$children.***.id)
dom.addEventListener("DOMNodeInserted", function(){
   let height=dom.getBoundingClientRect().height    
}, false)

唉，結果和 $nextTick一毛一樣，扎心啦，而且在這個監聽函數里面使用函數之后，會一直獲取到dom更新的信息，卡崩啦！

233,強行出來:嗯嗯，天要亡我??！靜想，如果要實現避免動態的card頁面生成到可視頁面外，大概兩種途徑，第一種動態的判斷位置條件，另一種是通過更加生成位置再次調整！行吧，又回到坑3啦，顯示給位置一個默認值，然后根據$nextTick()獲取到的dom信息，然后根據鼠標位置，dom高度，可視化窗口高度document.body.clientHeight【上面的那個獲取到的是電腦的信息】來判斷，調整?。。。?/p>

/苦笑/苦笑，有更好的方法，求告知?。?！

云服務器 GPU云服務器 js dom監聽 DOM元素修改DOM元素 dom獲取元素

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/100801.html

DOM元素動態監聽

摘要：今天遇到一個一直認為很簡單的問題，真正接手后才知道這么可怕大體是這樣的，默認動態加載的應該是自動向下，當遇到頁面最下面應該自動向上渲染。動態生成的都是根據來監聽獲取元素的信息。今天遇到一個一直認為很簡單的問題，真正接手后才知道這么可怕大體是這樣的，默認動態加載的card應該是自動向下，當card遇到頁面最下面應該自動向上渲染。showImg(https://segmentfault...

wh469012917 2019-08-02 14:04 評論0 收藏0
【JavaScript系列】動態綁定事件方法：(1)jquery的on方法；(2)html元素綁定

摘要：提示如需移除事件處理程序，請使用方法。說明和綁定的點擊事件被的事件覆蓋。分析不同的綁定方式執行順序屬性元素事件事件。元素綁定事件刪除按鈕。屬性綁定事件動態綁定事件方法的方法的屬性綁定。一、動態監聽加載對象當使用js或jQuery動態創建元素(例如append，appendChildren)，再用on(事件, function(){...})或addEventListener監聽事件...

young.li 2019-08-26 10:20 評論0 收藏0
基于 JSX 的動態數據綁定

摘要：基于的動態數據綁定歸屬于筆者的與前端工程化實踐中的，本文中設計的引用資料參考學習與實踐資料索引，如果有對基礎語法尚存疑惑的可以參閱現代開發語法基礎與實踐技巧。基于 JSX 的動態數據綁定歸屬于筆者的 React 與前端工程化實踐中的，本文中設計的引用資料參考 React 學習與實踐資料索引，如果有對 JavaScript 基礎語法尚存疑惑的可以參閱現代 JavaScript 開發：語...

Sleepy 2019-08-20 18:32 評論0 收藏0
Vue_Vue權威指南

摘要：效率不高，很多多余，稱之為臟檢查。通過索引設置數組元素并觸發視圖更新。解決閃爍問題自定義指令自定義指令提供一種機制將數據的變化映射為行為。 Vue特性 Vue只是聚焦視圖層，是一個構建數據驅動的Web界面的庫。 Vue通過簡單 API提供高效的數據綁定和靈活的組件系統輕量數據綁定指令插件化架構從傳統后臺MVC 向REST API + 前端MV*遷移DOM是數據的一種自然映...

SimonMa 2019-08-21 14:31 評論0 收藏0
前端面試匯總VUE(二)

摘要：采用了新舊的對比，獲取差異的，最后一次性的更新到真實上。對基本屬性進行監聽對對象進行監聽對對象某一個屬性監聽監聽自定義指令全局指令，第一個參數是指令名，第二個參數是一個對象，對象內部有個的函數，函數里有這個參數，表示綁定了這個指令的元素。 11.vue 虛擬DOM的理解 Web界面由DOM樹(樹的意思是數據結構)來構建，當其中一部分發生變化時，其實就是對應某個DOM節點發生了變化，??...

Sanchi 2019-08-23 18:29 評論0 收藏0