Is it possible to check pointerup event is using the same finger as pointerdown in JavaScript

Question

I create a square div, and I want to know how many pointer is triggering pointer down event in the div on the screen; there is no property like event.touches.length in pointer event, so I use a counter variable to calculate the number of finger down (ie pointer down event) inside the div, and achieve these conditions:
1. Pointer down inside the div, counter plus 1.
3. Pointer down inside the div (counter plus 1), and release pointer inside the div, counter minus 1.
3. Pointer down inside the div (counter plus 1), move outside the div, and release outside the div, counter still minus 1.
4. Pointer down and pointer up outside the div (click outside), counter does nothing.

My program is like this:

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>

In general, we only use one mouse, so there is no problem occurred. But there is a problem occurred in pointer event. For example, my index finger of left hand touch down inside the div, the pointer down event is triggered, counter is 1 now; but my index finger of right hand "click" outside the div, pointer up event is triggered here, so my counter get a wrong number 0. (My left index finger is still pressed)

I don't want click event occurred outside of the div (pointerdown and pointerup are both fired outside of the div) to affect my counter.

If there is a way to determine my pointer up event is correlated to which pointer down event?

Just like the event target of touch start event and touch end event is the same, so that I can know they are related.

Thanks in advance.

Wouldn't that mean the counter is always zero? (After no more mouse buttons are being pressed) — Emanuel Vintilă, May 07 '15 at 06:36
In fact, I want to detect how much pointer down in the div. But there is not a property like touch.length in pointer event. I want to use counter to calculate the number of fingers. But I found a problem, if my three fingers down in the div (counter is 3 now), my other finger click outside, the counter is decreased. The counter becomes wrong. — Sam, May 07 '15 at 06:38
Yes. When my fingers, which pointer down in the div, are released from touchable screen. The counter should be 0. — Sam, May 07 '15 at 06:43
Here, try this [codepen](http://codepen.io/anon/pen/jPbXaV)(You have to release the mouse to the right of the div, but in a complete page without iframes this would work perfectly.) — Emanuel Vintilă, May 07 '15 at 06:46
Thanks. But it still has problem, if we replace mouse event to IE pointer event, and test in IE on touchable screen. For example, my index finger of left hand press down in div, and my index finger of right hand click outside of div, the counter becomes 0. — Sam, May 07 '15 at 06:48
I can see the problem here... I could workaround this, but how many fingers can there be on a screen, respectively how many buttons can one press at a time? — Emanuel Vintilă, May 07 '15 at 06:52
Sorry, I don't understand what you mean... I want to do different action based on how many fingers is pressed down in div. — Sam, May 07 '15 at 06:56
Thank. But when finger, which is pressed inside div, move outside of div and release it, the counter still need to minus. — Sam, May 07 '15 at 07:08
How about you just reset the value if `body.mouseup` is fired? — Emanuel Vintilă, May 07 '15 at 08:36
Do you mean reset counter to 0? Currently, problem is occurred on pointer event (pointerdown, pointermove and pointerup). If my finger clicks outside of the div, body.mouseup/body.pointerup will be still fired. — Sam, May 07 '15 at 08:55

score 0 · Answer 1 · answered Jul 23 '15 at 00:59

Since the question is old I'll keep this brief, but I think you might be able to solve your problem by keeping track of the different pointerIds you get in the different pointer events. Also have a look at this MSDN page, specifically at this code snippet:

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

Is it possible to check pointerup event is using the same finger as pointerdown in JavaScript

1 Answers1