使用Vue,实现事件对象的“监听”(addEventListener)、“销毁”(removeEventListener)。
场景我在写一个“滑动验证码”的插件。需要给滑块绑定事件,监听已滑动的距离。验证成功后,销毁绑定事件。实现代码1、在data里定义data(){return{events: {handleEvent: function(event) {switch (event.type) {...
·
场景
我在写一个“滑动验证码”的插件。
需要给滑块绑定事件,监听已滑动的距离。
验证成功后,销毁绑定事件。
实现代码
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);
}
}
参考资料
写在最后
如有更优雅的实现方式,欢迎评论留言。
有时间我会继续研究。
更多推荐
已为社区贡献11条内容
所有评论(0)