使用vue-seamless-scroll自动滚动插件复制出来的数据点击事件无效的解决办法

引言:做可视化地图项目,使用vue-seamless-scroll实现表格数据自动滚动,有个bug就是复制出来的数据点击事件失效。这个插件底层的实现是cope的形式,

无限滚动原理:无限滚动的原理就是把之前的遍历的内容复制一份,滚动这两部分内容,达到无缝滚动效果。(一般数据量比较多有这种效果,数据量比较少,我就不让他滚动了)。

 

问题分析:

当第一个ul中的数据滚动完时(真实数据),第二个ul 部分的click事件不起作用(复制出来的数据),无法实现一些点击这行,弹窗详情信息业务需要功能。 

我需要这些数据添加一些点击事件,弹出二级页面及区域切换效果。

解决办法:

方式一

采用事件委托的方式:

 事件委托又叫事件代理,就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件。

一般来说,DOM需要有事件处理程序,我们都会直接给它设定事件处理程序就好了,但是如果有很多DOM需要添加处理事件,比如,一个ul下有很多个li,需要给每个li都添加相同的点击事件,这时候我们通常会用for循环的方法,遍历所有元素,然后给他们添加点击事件,虽然看似内心毫无波澜很合理的做法,背后实则存在着巨大的性能弊端。

在JS中,添加到页面上的事件处理程序数量将直接关系到页面的整体运行性能,因为需要不断的与DOM节点进行交互,所以访问DOM的次数越多,引起浏览器重绘与重排的次数也就越多,就会延长整个页面的交互就绪时间,这就是为什么性能优化的主要思路就是从减少DOM操作的角度去入手的原因。

这种情况,如果用时间委托,就会将所有的操作都放到JS程序里面,与DOM的操作就只需要交互一次,这样就能大大的减少与DOM的交互次数;并且,每一个函数都是一个对象,是对象就会占用内存,对象越多,内存占用率就越大,性能自然就会越差,如果使用事件委托,我们就可以只对它的父级这一个对象进行操作,这样我们就值需要一个内存空间就够了,大量节省了内存空间,提高整体页面的性能了。

给外层div加点击事件,通过event.target获取到点击的dom元素

 

 给点击的列的元素绑定 属性,这里我绑定了id和自定义属性data-obj对象,直接把改列的item添加进去,不用一个一个单独绑定。

点击方法,把原来的点击方法取消,直接在这个底部调用。、

写了一个比较通用的方法其它几个页面按照这个方法也很好用,不用一个个绑定,那个类row纯属做了一个标志位,便于循环之后的判断,如果不清楚,直接console.log,便于定位每个变量。

 大功告成。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/357309.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

最短路的几种算法及其优化(模板)

一.Dijkstra 算法 dijkstra算法适用于边权为正的情况,求单源最短路,适用于有向图和无向图 模板伪代码: 清除所有点的标号 设d[0]0,其余d[i]INF; 循环n次{ 在所有未标记的节点中,寻找d[i]最小的点x 给x做标记…

极客青年说,北京沙龙

大家好,我是孙叫兽,本期内容给大家分享infoq写作平台在北京站的沙龙主题。主要流程如下:早上起来,吃了点饭,然后就去北京望京悠乐汇的A1202,这次是个轰趴馆,比较适合年轻的程序员放松。去的稍微早了点&…

vue点击弹窗自动触发点击事件的解决办法

业务场景:使用vue element ui 的el-dialog,点击弹窗之后,默认加载第一个按钮的数据进行初始化。 div 指令: // 自动触发点击事件directives:{trigger:{inserted(el,binging){// console.log("自动触发事件")el.click()}…

vue根据表格字段不同的状态显示不同的颜色。

业务需求:根据后台返回的数据,对表格中的严重等级和问题状态做一下颜色区分。数据很大,大概一年左右的数据,在二级弹窗中,数据滚动的形式。 大家好,我是孙叫兽 不加状态前: 我这个使用vue+div循环的实现,很便捷,使用element ui也是可以的。 然后再computed:{}中添加…

Apache JMeter教程

要负载测试您的Web应用程序吗? 然后,您应该了解Apache JMeter ! 该JMeter教程介绍了基本概念以及如何创建测试计划以及如何执行它以对应用程序进行基准测试。 这是我在Disy的Tech-Blog上的文章的交叉张贴 -谢谢您让我在公司时间写文章&…

Echats给柱状图及提示文字添加百分号(%)的解决办法

业务需求:给柱状图添加百分号。 目录 柱状图上添加%效果图 悬浮标签添加%效果图: 刚开始从后台取的数据带%,我这边取这个值的时候显示undifined, 后来就让这哥们把这类的数据从数据库把%去掉。这样我这边就取到了数据&#xff0…

前端使用linux命令更新项目生产包与测试包命令

业务需求:把vue开发的项目打成dist.zip文件,丢到服务器去,通过域名进行访问。 首先登录云管平台的账号和密码,找到对应的服务器,然后连接到堡垒机。 在命令行进入到域名下的地址及目录。 切换到测试文件夹 点击左上角…

CSDN学习神器——CSDN浏览器助手测评体验

导读:大家好,我叫孙叫兽,本期内容给大家分享一下CSDN浏览器助手这款插件,看看最新版的插件已经比较完善了,还有一些可以优化的地方。下面简单进行体验一把最新版! 体验时间:2021年5月31日。 目录…

CVE-2016-0143 漏洞分析(2016.4)

CVE-2016-0143漏洞分析 0x00 背景 4月20日,Nils Sommer在exploitdb上爆出了一枚新的Windows内核漏洞PoC。该漏洞影响所有版本的Windows操作系统,攻击者利用成功后可获得权限提升,微软在4月补丁日修复了该漏洞。 0x01 漏洞分析 Nils Sommer并没…

HB-X打不开的解决办法

导读:今早点击HB-X这款编译器的时候,点击快捷键和图标按钮一点反应都没有。死活打不开。 点击的时候一点提示都没有,重启电脑打开也是如此。 解决办法: 关机重启,一定要关机再重启。 其它情况请参考这个帖子&#xff…

【iCore3 双核心板_ uC/OS-III】例程五:软件定时器

实验指导书及代码包下载: http://pan.baidu.com/s/1eSHenjs iCore3 购买链接: https://item.taobao.com/item.htm?id524229438677 转载于:https://www.cnblogs.com/xiaomagee/p/5453762.html

前端 vue 在可视化大屏领域的工作实践

导读:最近入职了一家互联网公司,主要是做物联网及互联网解决方案方向,我上来就接手了这个项目,是一个可视化管理地图,主要用于某国企物业的安全预警的职能,说来也比较倒霉,刚来这公司,公司做这个项目的前端和后端都跑路了,然后让我一个月给他整改完,说是重构吧,还不…

java自建ocr完整示例_Java 7:完整的invokedynamic示例

java自建ocr完整示例我当前的Java 7系列中的另一个博客条目。 这次它处理的是invokedynamic,这是JVM上用于方法调用的新字节码指令。 invokedynamic指令允许呼叫站点与呼叫接收者之间的动态链接。 这意味着您可以将正在执行方法调用的类链接到在运行时正在接收调用的…

前端工程师直线学习路径

想自学前端?却不知道学习路径。报个班吧,又怕被坑。一张学习前端路径是带你少走N条弯路。最近两年,前端技术和三大框架地位趋于稳定,推荐这个前端开发学习路径。 新手自学前端的五大阶段。 第一阶段 想成为一名前端开发人员,第一步就是网页布局和效果实现。这时候你需要学…

VS code常用插件推荐(总结整理篇)

简介 vscode是微软开发的的一款代码编辑器,就如官网上说的一样,vscode重新定义(redefined)了代码编辑器。当前市面上常用的轻型代码编辑器主要是:sublime,notepad++,editplus,atom这几种。比起notepad++、editplus,vscode集成了许多IDE才具有的功能,比起它们更像一个…

Python全栈开发之3、数据类型set补充、深浅拷贝与函数

转载请注明出处http://www.cnblogs.com/Wxtrkbc/p/5466082.html 一、基本数据类型补充 set是一个无序而且不重复的集合,有些类似于数学中的集合,也可以求交集,求并集等,下面从代码里来看一下set的用法,如果对这些用法不太熟悉的话…

拿着5家offer的Java,对面试官做了什么?

大家好,我是孙叫兽。本期分享内容从Java初级开始说起,来讲一下要想拿到offer,你必须要做哪些充足准备! 先从初级Java开始,当你还是一个初级Java的时候,要想拿到offer,首先要关注自己的简历&…

进程与线程的一个简单解释

进程(process)和线程(thread)是操作系统的基本概念,但是它们比较抽象,不容易掌握。 最近,我读到一篇材料,发现有一个很好的类比,可以把它们解释地清晰易懂。 1. 计算机的…

前端面试官常问javaScript编程题,隔壁王大爷看了都会了

目录 1.数组排序。 2.数组元素的去重; 3.用递归的方法求数组的求和; 4.防抖节流的思路。 5.深拷贝、浅拷贝; 6.做一个10秒的倒计时; 7.setTimeout()和setInterval()的使用以及区别 导读:一些常见的前端面试官会让…

(五)Struts2 标签

所有的学习我们必须先搭建好Struts2的环境(1、导入对应的jar包,2、web.xml,3、struts.xml) 第一节:Struts2 标签简介 Struts2 自己封装了一套标签,比JSTL 强大,而且与Struts2 中的其他功能无缝结…