使用Vue,实现事件对象的“监听”(addEventListener)、“销毁”(removeEventListener)。

news/2024/7/10 1:54:38 标签: vue, 前端

场景

我在写一个“滑动验证码”的插件。
需要给滑块绑定事件,监听已滑动的距离。

验证成功后,销毁绑定事件。

实现代码

1、在data里定义

 data() {
     return {
         events: {
             handleEvent: function (event) {
                 switch (event.type) {
                     case 'mousemove':  //绑定的事件类型
                         this.myMouseMove(event); //这里是你的自定义事件。
                         break;
                     case 'mouseup':
                         this.myMouseUp(event);
                         break;
                 }
             },
             myMouseMove: (e) => {
                 //这里可以使用事件对象e。
                 //this可以直接访问data的数据。
                 let width = e.clientX - this.beginClientX;
                 //业务代码....
             },
             myMouseUp: (e) => {
                 //业务代码....
             },
         }
     }
 },

2、在mounted里新增监听事件

	mounted(){
	     let drag = document.getElementById("drag");
	     drag.addEventListener('mousemove', this.events, false);
	     drag.addEventListener('mouseup', this.events, false);
	}

3、在methods里销毁监听事件

	methods:{
		verify_Success(){
			let drag = document.getElementById("drag");
		    drag.removeEventListener('mousemove', this.events, false);
            drag.removeEventListener('mouseup', this.events, false);
		}
	}

参考资料

MDN-addEventListener

写在最后

如有更优雅的实现方式,欢迎评论留言。
有时间我会继续研究。


http://www.niftyadmin.cn/n/1122532.html

相关文章

用Google手机玩转OBD的行车电脑,,Torque for Android。。

首发于越野E族论坛:http://bbs.fblife.com/viewthread.php?tid1276583-----------------------------今天下午看到了之兄入了一套行云流水的行车显示器(http://bbs.fblife.com/viewthread.php?tid1275980)。。之前也关注这个东西&#xff0…

oauth2 传递token是否需要加密_SpringBoot2 整合OAuth2组件,模拟第三方授权

一、模式描述授权服务验证第三方服务的身份,验证邮箱用户的身份,记录和管理认证Token,为资源服务器提供Token校验。场景:第三方网站借助用户的邮箱登录,并访问邮箱账户的基础信息,头像、名称等。资源服务第…

【已解决】使用vue-electron脚手架进行vuex赋值时,失败的解决办法。

解决过程 1、初步尝试 我首先尝试用mutation(commit)传参。结果控制台报错: [Vuex Electron] Please, dont use direct commits, use dispatch instead of this.好好好。那我再用action传参试试。虽然控制台没报错,但却一直无…

老树开新花:DLL劫持漏洞新玩法

DLL劫持漏洞已经是一个老生常谈,毫无新鲜感的话题了。DLL劫持技术也已经是黑客们杀人越货,打家劫舍必备的武器。那么,随着Win10的诞生,微软是否已经修复了此漏洞?同时在当前的安全环境下,DLL劫持漏洞是否又…

jvm容器的关系

jvm实例,tomcat容器,spring容器,在内存中的关系5 1.一个java项目对应一个jvm 吗? 2.tomcat里面加载多个java项目 ,是不是用了一个jvm? 3.java项目中的spring容器,部署到tomcat容器,启…

python循环命名列表_python – 如何在嵌套for循环中检查字典和列表中的项的成员资格?...

试图让这项工作让我头晕目眩:我有一个有序的词典:OrderedDict([(key, {keyword: {blue, yellow}), (key1, {keyword: {lock, door})])我有一个potential_matches列表:[红色,蓝色,一个]我想将这些潜在的匹配命名为两个列表中的一个&#xff1a…

【已解决】Github桌面版(Github Desktop)打开失败的解决办法。

可能的打不开原因 上次卸载Github桌面版没删除干净,导致二次安装时失败。 解决办法 Try, after uninstalling GitHub Desktop, to make sure there is no GitHub folder left in %LocalAppData%\GitHubDesktop and the %AppData%\GitHub Desktop. Try again insta…

python中if __name__ == '__main__': 的解析

当你打开一个.py文件时,经常会在代码的最下面看到if __name__ __main__:,现在就来介 绍一下它的作用. 模块是对象,并且所有的模块都有一个内置属性 __name__。一个模块的 __name__ 的值取决于您如何应用模块。如果 import 一个模块,那么模块__name__ 的…