Is there a pointer event that equals to 'click' event?

Question

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

Nestling

There's pointer-down event, and pointer-up event. You're looking for a pointer-down-then-up event? – Inappreciable

Not entirely clear what you're asking. – Borehole

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 – Chilblain

https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events – Aegrotat

I can't tell what OP is asking? – Chickenlivered

@Inappreciable yes I was wondering if there is an existing 'pointer-down-then-up' event? – Nestling

@Chilblain 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? – Nestling

I have a little pointer events test page that displays all pointer events sent to a target on the page. Test of Pointer Events. Try it out. – Inappreciable

Answer 1

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.

Inappreciable

Btw I found this: developer.mozilla.org/en-US/docs/Web/API/Touch_events/…. It says for many browsers the touch event will also fire a mouse event. – Nestling

Answer 2

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

Osvaldooswal