你如何规避多点触控？

Question

我在使用 pointerdown 和 pointerup 时遇到问题，特别是在涉及多点触控设备时。虽然这些事件侦听器只需单击一次鼠标即可按预期工作，但触摸屏可以允许同时多次点击会破坏以下代码：

HTML

 <progress id="air" max="100" value="100">AIR</progress>

JS

 var air = document.querySelector('#air')
 var losingairInterval, gainingairInterval;
        
function drowning() {
  if (air.value <= 0) {
    clearInterval(losingairInterval)
  } else {
    air.value--;
  }
}

// Breathing Mechanic
function gainingair() {
  if (air.value == 100) {
    clearInterval(gainingairInterval)
  } else {
    air.value++;
  }
}

function crouchingdown() {
  clearInterval(gainingairInterval)
  losingairInterval = setInterval(drowning, 100)
}

function crouchingup() {
  clearInterval(losingairInterval)
  gainingairInterval = setInterval(gainingair, 200)
}

addEventListener('pointerup', crouchingup);
addEventListener('pointerdown', crouchingdown);

jsFiddle 示例： https://jsfiddle.net/CamWhiting/krufx5by/2/

Answer 1

而不是禁用 multi-touch，您可以使用简单的 IF 语句检测一组 pointerup-s 或 pointerdown-s。

 // Method to stop multi-touch affecting up the breathing mechanic 
 var killmulti = 0;


// Breathing Mechanic
function gainingair() {
  if (air.value == 100) {
    clearInterval(gainingairInterval)
  } else {
    air.value++;
  }
}

function crouchingdown() {
  killmulti++;
  if (killmulti === 1) {
    clearInterval(gainingairInterval)
    losingairInterval = setInterval(drowning, 100)
  }
}

function crouchingup() {
  killmulti--;
   if (killmulti < 1) {
     clearInterval(losingairInterval)
     gainingairInterval = setInterval(gainingair, 200)
   }

}

addEventListener('pointerup', crouchingup);
addEventListener('pointerdown', crouchingdown);

你如何规避多点触控？

How do you circumvent multi-touch?

javascript

progress-bar

multi-touch