0

我创建了一个方形 div，我想知道屏幕上 div 中有多少指针触发了指针向下事件；指针事件中没有像 event.touches.length 这样的属性，所以我使用一个计数器变量来计算 div 内的手指向下（即指针向下事件）的次数，并实现以下条件：
1. div 内的指针向下， counter 加 1。
3. 在 div 内向下指针（counter 加 1），在 div 内释放指针，counter 减 1。
3. 在 div 内指针向下（counter 加 1），移到 div 外，在 div 外释放div，counter 仍然是负 1。
4. 指针在 div 外部向下和指针向上（单击外部），counter 什么也不做。

我的程序是这样的：

var elem, counter,
    onDown, onUp,
    animate;

counter = 0;

onDown = function () {
    var body;
  
    body = document.body;
  
    counter++;

//    body.addEventListener('mouseup', onUp, false);
    body.addEventListener('pointerup', onUp, false);
};
onUp = function () {
    var body;
  
    body = document.body;

    counter--;

//    body.removeEventListener('mouseup', onUp);
    body.removeEventListener('pointerup', onUp);
};

elem = document.getElementById('square');
//elem.addEventListener('mousedown', onDown, false);
elem.addEventListener('pointerdown', onDown, false);

animate = function () {
  // Use different color according to the number of fingers
  // How many fingers are trigger pointer down inside the div,
  // and not released yet.
  // (Include the finger which is moved outside after 
  //  pointer down inside the div)
  switch (counter) {
    case 1:
        elem.style.backgroundColor = 'red';
        break;
    case 2:   
        elem.style.backgroundColor = 'yellow';
        break;
    case 3:
        elem.style.backgroundColor = 'blue';
        break;
    case 4:
        elem.style.backgroundColor = 'black';
        break;
    default:
        elem.style.backgroundColor = 'white';

  }
  requestAnimationFrame(animate);
};

animate();
#square {
  width: 300px;
  height: 300px;
  border: 1px solid black;
}
<div id="square"></div>

一般来说，我们只使用一只鼠标，所以没有问题发生。但是指针事件发生了问题。比如我左手食指在div里面touch down，pointer down事件被触发，此时counter为1；但是我右手的食指在 div 外“点击”，指针向上事件在这里触发，所以我的计数器得到一个错误的数字 0。（我的左手食指仍然按下）

我不希望在 div 之外发生点击事件（pointerdown 和 pointerup 都在 div 之外触发）影响我的计数器。

如果有办法确定我的指针向上事件与哪个指针向下事件相关？

就像触摸开始事件和触摸结束事件的事件目标一样，所以我可以知道它们是相关的。

提前致谢。

4

1 回答 1

0

由于问题很老，我将保持简短，但我认为您可以通过跟踪pointerId您在不同指针事件中获得的不同 s 来解决您的问题。还可以看看这个 MSDN 页面，特别是这个代码片段：

function pointerdownHandler (evt) {
      evt.target.setPointerCapture(evt.pointerId);
}
于 2015-07-23T00:59:20.530 回答