JSFiddle - React, Tailwind, and code Playground
HTML
<p>Move your finger around...</p>
JavaScript
(function ($, document) {
$(function () {
var
gnStartX = 0,
gnStartY = 0,
gnStartTime = 0,
gnEndX = 0,
gnEndY = 0,
gnEndTime = 0,
startTarget,
moves;
if (typeof document.addEventListener === 'function') {
document.addEventListener ('touchstart', function(event) {
gnEndX = gnStartX = event.touches[0].screenX;
gnEndY = gnStartY = event.touches[0].screenY;
gnEndTime = gnStartTime = Number(new Date());
startTarget = event.target;
moves = 0;
}, false);
document.addEventListener ('touchmove', function(event) {
gnEndX = event.touches[0].pageX;
gnEndY = event.touches[0].pageY;
gnEndTime = Number(new Date());
moves++;
}, false);
document.addEventListener ('touchend', function(event) {
var nDiffTime,
nDiffX = gnEndX - gnStartX,
nDiffY = gnEndY - gnStartY;
gnEndTime = Number(new Date());
nDiffTime = gnEndTime - gnStartTime;
$('body').append(moves + ' move events<br />');
if (startTarget === event.target) {
$(event.target).trigger ('swiperight');
$(event.target).trigger ('swipeleft');
var info = {};
info.x = gnEndX - event.target.offsetLeft;
info.y = gnEndY - event.target.offsetTop;
$(event.target).trigger ('tap', info);
}
}, false);
}
...