DOM元素动态监听

codercao 发布于2019-08-23 14:34 / 2563人阅读

摘要：今天遇到一个一直认为很简单的问题，真正接手后才知道这么可怕大体是这样的，默认动态加载的应该是自动向下，当遇到页面最下面应该自动向上渲染。动态生成的都是根据来监听获取元素的信息。

今天遇到一个一直认为很简单的问题，真正接手后才知道这么可怕

大体是这样的，默认动态加载的card应该是自动向下，当card遇到页面最下面应该自动向上渲染。

动态生成的DOM都是根据id来监听获取元素的信息。

坑1：当时数据较少没有考虑到card渲染方向，所以在页面下面的时候card加载到了浏览器可视界面之外啦

入坑1：当我一开始碰到这个bug时，so easy！！！所以加了一个判断条件，在函数@mouseenter获取触发点位置，然后加上一个页面高度和页面高度screen.height进行对比，然后对card进行移位，蒽，easy！！！

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更新后，函数返回操作！！！换个思路，于是通过监控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【上面的那个获取到的是电脑的信息】来判断，调整！！！！

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

云服务器 GPU云服务器 js dom监听 DOM元素修改DOM元素 dom获取元素

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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