CODEWITHSUNDEEP
javascripthtmlclickmouseeventpointer-events
Andy You
Andy You

Reputation: 151

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

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

Upvotes: 12

Views: 11256

Answers (2)

alphanumeric
alphanumeric

Reputation: 21

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

Upvotes: 2

terrymorse
terrymorse

Reputation: 7086

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.

Upvotes: 3

Related Questions