从原型触发事件时如何禁用事件?

时间:2019-05-13 00:32:41

标签: javascript html events disable removeeventlistener

我有一个基于原型的纯JavaScript代码块。我的期望是禁用整个代码,直到完成阅读为止。

例如,如果我触发touchstart事件,那么在代码运行时该事件将被禁用。

因此,我在removeEventListener()函数中添加了start来删除要测试的事件,但每次触摸或滑动元素时,控制台都会弹出:

enter image description here

'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文章以外找不到任何信息。

在代码运行时是否有任何方法可以停止或禁用事件?

0 个答案:

没有答案