javascript - Is there a pointer event that equals to 'click' event? - Stack Overflow

admin管理员组

文章数量:1289623

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

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

• javascript
• html
• click
• mouseevent
• pointer-events

Share Improve this question Follow edited Jul 4, 2021 at 8:42 matronator 55477 silver badges1616 bronze badges asked Jan 27, 2021 at 23:10 Andy YouAndy You 15111 gold badge11 silver badge66 bronze badges 8

• There's pointer-down event, and pointer-up event. You're looking for a pointer-down-then-up event? – terrymorse Commented Jan 27, 2021 at 23:14
• Not entirely clear what you're asking. – Geuis Commented Jan 27, 2021 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 posed event, you have to pose it yourself from pointerevents – Kaiido Commented Jan 27, 2021 at 23:19
• https://developer.mozilla/en-US/docs/Web/API/Pointer_events – Kidas Commented Jan 27, 2021 at 23:25
• 1 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. – terrymorse Commented Jan 27, 2021 at 23:49

 |  Show 3 more ments

2 Answers 2

Sorted by: Reset to default 3

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.

Not sure if this should've been a ment, 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

本文标签： javascriptIs there a pointer event that equals to 39click39 eventStack Overflow