CODEWITHSUNDEEP
javascripteventsdom-events
Mirel Vlad
Mirel Vlad

Reputation: 2082

pointerdown vs onclick: what is the difference?

What is the difference between the onpointerdown and onclick event handlers?

Are there any practical differences? Are the events not propagated the same up the DOM tree? Are there some devices that only respond to one of these events?

I initially assumed that it is only pointerdown that is triggered in touch devices or with a pen, but onclick seems to be triggered as well.

Upvotes: 12

Views: 20426

Answers (3)

Marcel Majhenic
Marcel Majhenic

Reputation: 67

Based on my experiences working on Android projects, I've found using PointerDown is faster than using PointerClick.

For those dealing with buttons or event triggers who prioritize quick execution, the PointerDown event is the recommended approach and faster approach from my side.

Upvotes: 0

Clemens Dinkel
Clemens Dinkel

Reputation: 344

To add to Nawaf answer: The point in time when the evenhandlers are fired is also different (at least when using mouse).

  • onPointerDown fires when the mouse button is pressed down
  • onClick waits for press AND release of the mouse button.

Upvotes: 10

Nawaf Khalifah
Nawaf Khalifah

Reputation: 786

  1. Are there any practical differences?

Yes there are.

pointerDown it's actually equivalent to onMouseDown but the main difference is that mouseDown only sends to an Element but pointerDown can be sent to Document, Window, and Element.

  1. What is the difference between the onpointerdown and onclick event handlers?

  • pointerDown can captures the right/left/middle clicks.

  • onClick only captures the left click.

Live Example:

The example will make it clearer.

https://codepen.io/nawafscript/pen/WNEyRyO

Upvotes: 21

Related Questions