7

The 'click' event is a mouse event which fires after both the mousedown and mouseup events have fired.

Now pointer event has a broader use case, so I wonder if there is a corresponding 'click' event for pointer event also?

Thanks. Andy

matronator
  • 465
  • 6
  • 13
Andy You
  • 101
  • 1
  • 5
  • There's `pointer-down` event, and `pointer-up` event. You're looking for a `pointer-down-then-up` event? – terrymorse Jan 27 '21 at 23:14
  • Not entirely clear what you're asking. – Geuis Jan 27 '21 at 23:19
  • 4
    No there isn't and you apparently already know what it takes to make one yourself: consecutive pointerdown + pointerup on the same target. As you said pointer events have broader use cases, they also are more "raw". click is a composed event, you have to compose it yourself from pointerevents – Kaiido Jan 27 '21 at 23:19
  • [https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events](https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events) – Kidas Jan 27 '21 at 23:25
  • I can't tell what OP is asking? – OOPS Studio Jan 27 '21 at 23:25
  • @terrymorse yes I was wondering if there is an existing 'pointer-down-then-up' event? – Andy You Jan 27 '21 at 23:32
  • @Kaiido ok so it seems I need to make a composed event using pointerdown and pointerup. just want to make sure 'click' event won't be triggered for touch events right? – Andy You Jan 27 '21 at 23:33
  • I have a little pointer events test page that displays all pointer events sent to a target on the page. [Test of Pointer Events](https://terrymorse.com/devtools/pointerevents/index.html). Try it out. – terrymorse Jan 27 '21 at 23:49

2 Answers2

2

As to the question: Is there a pointer event that's equivalent to the click event?

The answer is no.

As to the question: Does a pointer press dispatch a click event?

Answering that may take some testing.

Using a little test page that reports every pointer event and click event, I obtained the following events for a single finger press on an iPhone:

16:01:45.416 - pointerover - width: 48.5, height: 48.5
16:01:45.417 - pointerenter - width: 48.5, height: 48.5
16:01:45.418 - pointerdown - width: 48.5, height: 48.5
16:01:45.601 - pointerup - width: 0.0, height: 0.0
16:01:45.602 - pointerout - width: 0.0, height: 0.0
16:01:45.602 - pointerleave - width: 0.0, height: 0.0
16:01:45.636 - click - width: NaN, height: NaN

(the width and height values report the size of the pointer tip, which in this case is a finger)

So it seems that at least on an iPhone, a click event is dispatched with a finger press.

terrymorse
  • 6,771
  • 1
  • 21
  • 27
  • Btw I found this: https://developer.mozilla.org/en-US/docs/Web/API/Touch_events/Supporting_both_TouchEvent_and_MouseEvent. It says for many browsers the touch event will also fire a mouse event. – Andy You Jan 28 '21 at 00:11
1

Not sure if this should've been a comment, but...

On MDN they state that "click" event is a MouseEvent.

And surely in desktop firefox the snippet below logs a MouseEvent.

document.querySelector("div").addEventListener("click", (ev) => {
 document.write(ev.constructor.name);
});
<div>CLICK ME</div>

However, on desktop chrome, it logs "PointerEvent"!

To answer your question (in a hacky way):

If you only target chrome, you can check ev.pointerType to distiguish between "mouse" and "touch". This means "click" event is generic, it will tell you "what clicked" in its event details. At least on chrome.

Edit: I just noticed that spec allows for chrome's behavior.

Interface PointerEvent

alphanumeric
  • 11
  • 3