javascript - 如何在纯JavaScript中临时禁用该事件？

我正在用普通的JavaScript制作自己的滑块系统。问题是每次我在完成动画之前重做touch-starting时，事件和动画都会像这样覆盖：



我的期望是摆脱覆盖，并暂时禁用touchevents，直到CSS动画（添加，通过在JS中使用.classList删除CSS类）结束。

我已经尝试过自己解决此问题，但不知道该如何处理。

我附上了我在上面的GIF中使用的基本代码结构，该代码应尽可能简化。请原谅无法在此代码段上上传完整代码，因为问题可能太长且难以理解：

'use strict';
(function () {
  function Card($el) {
    this.$el = $el;
    this.$el.addEventListener('touchstart', (e) => this.start(e));
    this.$el.addEventListener('touchmove', (e) => this.move(e));
    this.$el.addEventListener('touchend', (e) => this.end(e));
  }
  Card.prototype = {
    start: function(e) {
      this.active = false;
      this.coordX = e.touches[0].clientX;
      this.coordY = e.touches[0].clientY;
    },
    move: function(e) {
      this.active = true;
      var x = e.touches[0].clientX,
          y = e.touches[0].clientY,
          dist = Math.sqrt(x + this.coordX);
    },
    end: function(e) {
      let distAmount = e.changedTouches[0].clientX - this.coordX;
      if (distAmount > 200) {
        this.create(this.direction * -1, this.swipe);
      } else if (distAmount < -200) {
        this.create(this.direction, this.swipe);
      }
    },
    create: function(direction, callback) {
      let bound = callback.bind(this);
      console.log(`Disable the whole events (touchstart, move, end)`);
      setTimeout(bound, 100, direction, this.resize);
    },
    swipe: function(direction, callback) {
      let binding = callback.bind(this);
      console.log('Disabling the events');
      setTimeout(binding, 800, direction);
    },
    resize: function() {
      console.log(`Allow the events after this function is end`);
    }
  }

  /********************************************************************/

  let news_box = document.getElementById('box1');
  const newsCard = new Card(news_box);
}());

      * {
        margin: 0;
        padding: 0;
      }
      #box {
        width: auto;
        height: 800px;
        border: 4px dotted black;
      }
      .contents {
        position: absolute;
        width: 200px;
        height: 200px;
        float: left;
        top: 0;
        left: 0;
      }
      .purple {
        background-color: purple;
      }

    <div id="box1">
      <div class="contents purple">
        box content
      </div>
    </div>

最佳答案

您可以在this.allowTriggering = true;内引入布尔function Card($el)

在create中，应将其设置为false this.allowTriggering = false;

在resize中，您应该将其还原为真实的this.allowTriggering = true;

然后，使用if条件包装函数start，move和end，以检查this.allowTriggering是否为true。

完整代码：

'use strict';
(function () {
    function Card($el) {
        this.$el = $el;
        this.$el.addEventListener('touchstart', (e) => this.start(e));
        this.$el.addEventListener('touchmove', (e) => this.move(e));
        this.$el.addEventListener('touchend', (e) => this.end(e));
        this.allowTriggering = true;
    }

    Card.prototype = {
        start: function (e) {
            if (this.allowTriggering) {
                this.active = false;
                this.coordX = e.touches[0].clientX;
                this.coordY = e.touches[0].clientY;
            }
        },
        move: function (e) {
            if (this.allowTriggering) {
                this.active = true;
                var x = e.touches[0].clientX,
                    y = e.touches[0].clientY,
                    dist = Math.sqrt(x + this.coordX);
            }
        },
        end: function (e) {
            if (this.allowTriggering) {
                let distAmount = e.changedTouches[0].clientX - this.coordX;
                if (distAmount > 200) {
                    this.create(this.direction * -1, this.swipe);
                } else if (distAmount < -200) {
                    this.create(this.direction, this.swipe);
                }
            }
        },
        create: function (direction, callback) {
            let bound = callback.bind(this);
            console.log(`Disable the whole events (touchstart, move, end)`);
            this.allowTriggering = false;
            setTimeout(bound, 100, direction, this.resize);
        },
        swipe: function (direction, callback) {
            let binding = callback.bind(this);
            console.log('Disabling the events');
            setTimeout(binding, 800, direction);
        },
        resize: function () {
            console.log(`Allow the events after this function is end`);
            this.allowTriggering = true;
        }
    };

    /********************************************************************/

    let news_box = document.getElementById('box1');
    const newsCard = new Card(news_box);
}());