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

Question

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

我的期望是摆脱覆盖，并touchevents暂时禁用，直到 CSS 动画（通过.classList在 JS 中使用添加、删除 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>

Answer 1

this.allowTriggering = true;你可以在里面引入一个布尔值function Card($el)

在create你应该把它假this.allowTriggering = false;

在resize您应该将其恢复为truethis.allowTriggering = true;

然后你包装你的函数start，move并end用 if 条件检查是否this.allowTriggering为真。

完整代码：

'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);
}());