使用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,这次是个轰趴馆,比较适合年轻的程序员放松。去的稍微早了点&…

html css 知识回顾2

在学习代码期间,练习代码是必不可少的内容,同样的对知识点的回顾也是更加重要的,在练代码的同时回顾知识点效果会更好。(知识会有重复的,我遵循的是不论是什么时候的知识都会从头来一遍,对于新掌握的我会再…

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

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

谈谈yii2-gii如何自定义模板

作者:白狼 出处:http://www.manks.top/article/yii2_gii_custom_template本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。 yii2中…

vue自定义指令directives实现自动点击事件及自动点击第一个按钮

业务场景:点击弹窗默认加载第一个按钮的数据。vue自定义指令directives实现这个需求 目录 自动点击所有的按钮。 自动点击第一个按钮, 自动点击所有的按钮。 <ul class="areaList"><li:class="{active: index

人员雇佣 网络流_雇用Java EE开发人员的一些面试问题

人员雇佣 网络流互联网上充斥着Java开发人员的面试问题。 这些问题的主要问题是&#xff0c;它们仅证明候选人具有良好的记忆力&#xff0c;并记住所有语法&#xff0c;结构&#xff0c;常量等。对他/她的逻辑推理没有真正的评估。 我在下面列举一些面试问题的例子&#xff0c;…

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

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

[IT业界] 网盘纷纷停止服务,下一个是谁?

今天新浪微盘发公告称即日起调整服务功能&#xff0c;停止普通用户的存储服务&#xff0c;也就是将关闭新浪微盘的搜索、分享功能。2016年以来&#xff0c;已经有115网盘、UC网盘等多家网络数据在线存储产品宣布关闭文件存储、分享功能&#xff0c;这对这些产品本身而言是致命的…

Apache JMeter教程

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

浏览器在线PDF预览取消下载按钮

业务场景:需要在线PDF下载的功能,刚开始用的是第三方的PDF.JS,按照网上的方法操作,排查,发现没有作用,经过和后端小伙伴沟通,原来这个地址是浏览器PDF预览。 目录 浏览器PDF取消办法: 在需要URL地址后边加上代码 PDF.JS取消下载的办法:</

Android深度探索(卷1)HAL与驱动开发 读书笔记(第四章)

第四章 源代码的下载和编译 本章主要介绍使用Git下载两套源代码。一套是Android 源代码&#xff0c;另一套是Linux 内核源代码。主要介绍如何下载和编译Android源代码和Linux内核源代码。 4.1下载Android源代码的环境 第一步&#xff1a;创建一个存放下载脚本文件repo的目录 #…

【Java从入门到天黑|04】JavaSE入门之数组

目录 数组概述 数组的四个基本特点: 数组声明创建 1、声明数组 2、创建数组

stage3d 骨骼优化

用过Away3D的朋友估计都会发现&#xff0c;&#xff0c;在Away3D里面使用超过一定骨骼数量的角色&#xff0c;当场景里面角色的数量稍微多一点&#xff0c;整个场景就会很卡。 对于这个现象&#xff0c;我之前得出的结论是。Stage3D的VC缓存器数量的限制&#xff0c;造成了对需…

morphia_Morphia和MongoDB:不断发展的文档结构

morphia在我先前关于Morphia的帖子中 &#xff0c;我介绍了一些典型用法&#xff0c;并提到了一些已知问题的警告和解决方法。 我展示了使用Morphia的工作有多么容易&#xff0c;以及它与Java世界的交互方式有多么干净。 为了跟进该帖子的后续内容&#xff0c;我将讨论如何处理…

PC端网页vue项目,页面滚动点击悬浮按钮最快的方法

业务场景,可视化大屏右下角添加一个悬浮按钮,点击按钮页面滚动到顶部。 经过实验,使用锚点是最简单的办法。 方法一:锚点 给顶部的合适位置添加一个 name="top"的锚点,maodianTop用于控制样式,可以不设置。 <a class="maodianTop" name="…

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

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

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

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

servle 3.0 新特性之一 对上传表单的支持

1. 上传 * 上传对表单的要求&#xff1a; > method"post" > enctype"multipart/form-data"&#xff0c;它的默认值是&#xff1a;application/x-www-form-urlencoded > <input type"file" name"必须给"/> * 上传Servle…

manifest.mf._MANIFEST.MF和feature.xml版本控制规则

manifest.mf.我永远都忘记了OSIF插件和功能的 MANIFEST.MF和feature.xml中的依赖项声明的规则是什么。 谷歌搜索经常导致沮丧而不是答案。 因此&#xff0c;因为今天我实际上找到了这些规则的简要列表&#xff0c;所以我想在这里重新发布它们&#xff0c;并进行一些较小的修改以…