当用户点击和滚动时，防止在移动设备上触发 pointerdown 事件

Question

您好，我已经实现了一个运行良好的长按 javascript 事件处理程序。然而，在移动设备上，用户点击...按住...以向上或向下滚动。移动设备上的这种滚动交互无意中触发了我的“指针向下”事件。我尝试在事件处理程序链中插入一个pointermove 事件，但这似乎触发了任意次数，具体取决于用户在指针向下时移动指针的时间，因此我无法设置一个布尔值可靠，不会来回翻转。

let pressTimer;
this.myElements.on('pointerup', (e) => {
  clearTimeout(pressTimer);
}).on('pointerdown', (e) => {
  let myEl = $(e.currentTarget);
  let checkbox= myEl.find('.checkbox');
  pressTimer = window.setTimeout(() => {
    checkbox.click();
  }, 750)
});

Answer 1

您可以添加一个全局布尔变量来保存指针的当前状态（可能是 isPointerDown）并采取相应措施。例如如果它是真的不要对pointerdown做出反应，如果有一个pointerup事件将这个变量重置为false。

let pressTimer;
var isPointerDown = false;
this.myElements.on('pointerup', (e) => {
  clearTimeout(pressTimer);
  isPointerDown = false;
}).on('pointerdown', (e) => {
  if (!isPointerDown) {
    let myEl = $(e.currentTarget);
    let checkbox = myEl.find('.checkbox');
    pressTimer = window.setTimeout(() => {
      isPointerDown = true;
      checkbox.click();
    }, 750)
  }
});