Можно ли проверить, что указатель на событие использует тот же палец, что и указатель вниз в JavaScript

Question

Я создаю квадратный div и хочу узнать, сколько указателей вызывает событие указателя вниз в div на экране; в событии указателя нет такого свойства, как event.touches.length, поэтому я использую переменную счетчика для вычисления количества нажатий вниз (т. е. события указателя вниз) внутри div и достижения следующих условий:
1. Указатель вниз внутри div, счетчик плюс 1.
3. Указатель вниз внутри div (счетчик плюс 1), и отпустите указатель внутри div, счетчик минус 1.
3. Указатель вниз внутри div (счетчик плюс 1), выход за пределы div и отпускание за пределы div, счетчик все еще минус 1.
4. Указатель вниз и указатель вне div (щелчок снаружи), счетчик ничего не делает.

Моя программа такая:

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, событие указателя вниз вызвано, счетчик равен 1; но мой указательный палец правой руки "щелкает" за пределами div, здесь происходит событие указателя вверх, поэтому мой счетчик получает неправильное число 0. (Мой левый указательный палец все еще нажат)

Я не хочу, чтобы событие щелчка происходило за пределами div (указатель вниз и pointerup оба запускались за пределами div), чтобы повлиять на мой счетчик.

Если есть способ определить мой указатель вверх событие связано с каким указателем вниз событие?

Точно так же, как цель события события начала касания и события окончания касания одинакова, так что я могу знать, что они связаны.

Заранее спасибо.

Answer 1

Поскольку вопрос старый, я буду держать это вкратце, но я думаю, что вы могли бы решить свою проблему, отслеживая различные pointerIds вы попадаете в разные события указателя. Также взгляните на эту страницу MSDN, в частности на этот фрагмент кода:

function pointerdownHandler (evt) {
      evt.target.setPointerCapture(evt.pointerId);
}