How can I tell the difference between click events and swipe events in JavaScript?

Question

I am using OnsenUI 2 with ReactJS for developing a Cross-Platform App with Cordova. It should run on mobile devices, but it would be nice if it works on normal browsers too. I have a Carousel Element with full screen images and when the user taps on the image I want to open a new page. The problem is, that every swipe to a new image is triggering a click event on the image. How can I tell the difference between a tap on the slide and a swipe to the new slide?

Codepen: https://codepen.io/anon/pen/amJooZ

Can you clarify if you are developing something for touchscreen devices or for computers? — Jo Sprague, Sep 23 '16 at 10:56
Mainly for mobile / touchscreen devices, but it would be nice if it would also work on normal computers. The problem does not appear on a mobile device. — Eknoes, Sep 23 '16 at 10:58

Jo Sprague · Accepted Answer · 2016-09-23T11:07:12.000

1

If you're developing something for a touch screen, instead of listening for click events, you should listen for touch events. See MDN's documentation of touch events. If it's important to handle normal click events as well, see the section about handling clicks.

edited Sep 23 '16 at 11:07

answered Sep 23 '16 at 11:00

Jo Sprague

16,523
10
42
62

How can I tell the difference between click events and swipe events in JavaScript?

1 Answers1