onTouchStart vs onClick in React?

Question

When I was building a project, I found that component worked way I was intended when I double clicked it button that using onClick . But when I changed onClick to onTouchStart , it starts to work I intended.

But I am bit worried using this without not knowing the difference with onClick method.

Is there a specific case that I should use onTouchStart instead onClick in React.js?

Answer 1

OnTouchStart is an event for devices with digitizer(touch devices). OnClick is an event for click (mouse) or tap (digitizer devices).

Open this Codepen on a mobile device and on desktop: http://codepen.io/blixt/pen/pgvGdK .

You will experience that the slide works in mobile but not in desktop.

You can achieve the same experience on desktop using mouse events: mouseup , mousedown and mousemove .

Answer 2

onTouchStart start is a touch event which fires when the user touches the element.

onClick is a mouse event which fires when user clicks on the element.

Touch event only work for touch screens, although there are ways to bind touch events with onClick events.