'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.



Solution 1:[1]

  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

Solution 2:[2]

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.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Mirel Vlad
Solution 2 Clemens Dinkel