[javascript] Detect a finger swipe through JavaScript on the iPhone and Android

If you just need swipe, you are better off size wise just using only the part you need. This should work on any touch device.

This is ~450 bytes' after gzip compression, minification, babel etc.

I wrote the below class based on the other answers, it uses percentage moved instead of pixels, and a event dispatcher pattern to hook/unhook things.

Use it like so:

const dispatcher = new SwipeEventDispatcher(myElement);
dispatcher.on('SWIPE_RIGHT', () => { console.log('I swiped right!') })

_x000D_
_x000D_
export class SwipeEventDispatcher {_x000D_
 constructor(element, options = {}) {_x000D_
  this.evtMap = {_x000D_
   SWIPE_LEFT: [],_x000D_
   SWIPE_UP: [],_x000D_
   SWIPE_DOWN: [],_x000D_
   SWIPE_RIGHT: []_x000D_
  };_x000D_
_x000D_
  this.xDown = null;_x000D_
  this.yDown = null;_x000D_
  this.element = element;_x000D_
  this.options = Object.assign({ triggerPercent: 0.3 }, options);_x000D_
_x000D_
  element.addEventListener('touchstart', evt => this.handleTouchStart(evt), false);_x000D_
  element.addEventListener('touchend', evt => this.handleTouchEnd(evt), false);_x000D_
 }_x000D_
_x000D_
 on(evt, cb) {_x000D_
  this.evtMap[evt].push(cb);_x000D_
 }_x000D_
_x000D_
 off(evt, lcb) {_x000D_
  this.evtMap[evt] = this.evtMap[evt].filter(cb => cb !== lcb);_x000D_
 }_x000D_
_x000D_
 trigger(evt, data) {_x000D_
  this.evtMap[evt].map(handler => handler(data));_x000D_
 }_x000D_
_x000D_
 handleTouchStart(evt) {_x000D_
  this.xDown = evt.touches[0].clientX;_x000D_
  this.yDown = evt.touches[0].clientY;_x000D_
 }_x000D_
_x000D_
 handleTouchEnd(evt) {_x000D_
  const deltaX = evt.changedTouches[0].clientX - this.xDown;_x000D_
  const deltaY = evt.changedTouches[0].clientY - this.yDown;_x000D_
  const distMoved = Math.abs(Math.abs(deltaX) > Math.abs(deltaY) ? deltaX : deltaY);_x000D_
  const activePct = distMoved / this.element.offsetWidth;_x000D_
_x000D_
  if (activePct > this.options.triggerPercent) {_x000D_
   if (Math.abs(deltaX) > Math.abs(deltaY)) {_x000D_
    deltaX < 0 ? this.trigger('SWIPE_LEFT') : this.trigger('SWIPE_RIGHT');_x000D_
   } else {_x000D_
    deltaY > 0 ? this.trigger('SWIPE_UP') : this.trigger('SWIPE_DOWN');_x000D_
   }_x000D_
  }_x000D_
 }_x000D_
}_x000D_
_x000D_
export default SwipeEventDispatcher;
_x000D_
_x000D_
_x000D_

Examples related to javascript

need to add a class to an element How to make a variable accessible outside a function? Hide Signs that Meteor.js was Used How to create a showdown.js markdown extension Please help me convert this script to a simple image slider Highlight Anchor Links when user manually scrolls? Summing radio input values How to execute an action before close metro app WinJS javascript, for loop defines a dynamic variable name Getting all files in directory with ajax

Examples related to iphone

Detect if the device is iPhone X Xcode 8 shows error that provisioning profile doesn't include signing certificate Access files in /var/mobile/Containers/Data/Application without jailbreaking iPhone Certificate has either expired or has been revoked Missing Compliance in Status when I add built for internal testing in Test Flight.How to solve? cordova run with ios error .. Error code 65 for command: xcodebuild with args: "Could not find Developer Disk Image" Reason: no suitable image found iPad Multitasking support requires these orientations How to insert new cell into UITableView in Swift

Examples related to android

Under what circumstances can I call findViewById with an Options Menu / Action Bar item? How to implement a simple scenario the OO way My eclipse won't open, i download the bundle pack it keeps saying error log getting " (1) no such column: _id10 " error java doesn't run if structure inside of onclick listener Cannot retrieve string(s) from preferences (settings) strange error in my Animation Drawable how to put image in a bundle and pass it to another activity FragmentActivity to Fragment A failure occurred while executing com.android.build.gradle.internal.tasks

Examples related to swipe

How to recognize swipe in all 4 directions Custom edit view in UITableViewCell while swipe left. Objective-C or Swift How to implement swipe gestures for mobile devices? dynamically add and remove view to viewpager Android: How to handle right to left swipe gestures Detect a finger swipe through JavaScript on the iPhone and Android