我有一个基于原型的纯JavaScript代码块。我的期望是禁用整个代码,直到完成阅读为止。
例如,如果我触发touchstart
事件,那么在代码运行时该事件将被禁用。
因此,我在removeEventListener()
函数中添加了start
来删除要测试的事件,但每次触摸或滑动元素时,控制台都会弹出:
'use strict';
(function() {
function Proto(elem) {
this.elem = elem;
this.active = false;
this.count = 1;
this.elem.addEventListener('touchstart', (e) => this.start(e));
this.elem.addEventListener('touchmove', (e) => this.move(e));
this.elem.addEventListener('touchend', (e) => this.end(e));
};
Proto.prototype = {
start: function(e) {
console.log('test');
e.currentTarget.removeEventListener("touchStart", this.start);
},
move: function(e) { },
end: function(e) { this.create(this.timeout); },
create: function(callback) {
let binding = callback.bind(this);
console.log('function create() & waiting .4 second . . .');
setTimeout(binding, 400, this.trans);
},
timeout: function(callback) {
let binding2 = callback.bind(this);
console.log('function timeout() & waiting 1 second . . .');
this.elem.classList.add('trans');
this.elem.style.left = 90 + 'px';
setTimeout(binding2, 1000);
},
trans: function() {
this.elem.style.left = 100 + 'px';
console.log('function trans()');
}
}
let _elem = document.querySelector('.contents');
const proProto = new Proto(_elem);
}());
* {
margin: 0;
padding: 0;
}
.contents {
position: absolute;
left: 100px;
width: 100px;
height: 100px;
border: 1px solid black;
}
.trans {
transition: left 1000ms;
}
<div class="contents">
some contents
</div>
我已经在Google和此处搜索了有关此主题的信息,但除this文章以外找不到任何信息。
在代码运行时是否有任何方法可以停止或禁用事件?