mobile-gestures

Introduction

Before this time, I wrote about mobile simple gestures event code, when I thought I wrote well, but six months later, the original code I still not often used, beacuse the use way is different from the js binding of the native event, people use it uncomfortable.

But now, I did it.

Using proxy, we can bind our own custom events like binding native events, and it's not surprising that we can delete events and decide on event-triggered time.

This is the repository,named mobie-gestures.

Install

As an es6 module

You can install it by using npm:

	$ npm install mobile-gestures --save

and then(better in code top-level scope),

	import 'mobile-gestures'
	

As a es5 js file

You can install by using it:

	<script src='./path/mobile-gestures/dist/gestures.common.js'></script>
	

Usage

Now, you can use it just like using native events.for example:

Using in js script

	document.getElementById('gesture').addEventListener('doubletap', (e) =>{
	  console.log(e)
	})

Using in Vue.js

	<img @scale.stop.prevent="scaleImg($event)" />
	

and ...

Gesture Types

tap

When you put a finger on the element and then quickly released on the element, it will trigger the tap event.The event will save the touch-related information on changedTouches, targetTouches, touches,and all of them are one-dimensional array.

doubletap

When you tap on an element twice with one finger in 300ms Quickly, it will trigger the doubletap event.The event will save the touch-related information on changedTouches, targetTouches, touches,and all of them are one-dimensional array.

longtap

When you put a finger on the element and stay in 500ms,it will trigger the longtap event.The event will save the touch-related information on changedTouches, targetTouches, touches,and all of them are one-dimensional array.

move

WHen you put one finger on the element ans move on it, it will trigger the move event.The event will save the touch-related information on changedTouches, targetTouches, touches,and all of them are two-dimensional array.

swipeup

When you put a finger on the element and swipe up, it will trigger the swipeup event.The event will save the touch-related information on changedTouches, targetTouches, touches,and all of them are two-dimensional array.

Note: During one touch, the event is triggered only one time.

swiperight

When you put a finger on the element and swipe right, it will trigger the swiperight event.The event will save the touch-related information on changedTouches, targetTouches, touches,and all of them are two-dimensional array.

Note: During one touch, the event is triggered only one time.

swipedown

When you put a finger on the element and swipe down, it will trigger the swipedown event.The event will save the touch-related information on changedTouches, targetTouches, touches,and all of them are two-dimensional array.

Note: During one touch, the event is triggered only one time.

swipeleft

When you put a finger on the element and swipe left, it will trigger the swipelwft event.The event will save the touch-related information on changedTouches, targetTouches, touches,and all of them are two-dimensional array.

Note: During one touch, the event is triggered only one time.

scale

When you put two fingers on the element and scale it, it will trigger the scale event.The event will save the touch-related information on changedTouches, targetTouches, touches,and all of them are two-dimensional array.In addition,the event also save the scale proportion on the scale property.

rotate

When you put two fingers on the element and rotate it, it will trigger the rotate event.The event will save the touch-related information on changedTouches, targetTouches, touches,and all of them are two-dimensional array.In addition,the event also save the rotate angle on the rotation property.

release

When you remove the last one finger from the element,it will trigger the release event.The event will save the touch-related information on changedTouches, targetTouches, touches,and all of them are one-dimensional array.

Prevent Events

Before the version 1.0.7, I use the event.preventDefault() at the gestures type events whicth cause some serious problems that make some scrollable elements cannot be scrollable due to the touches events's default behavior is scrolling.and to make some gestures can work and to prevent the browser default behavior,I add some prevent events to do it.It is simple and you can use it friendly.

Using in js script

	document.getElementById('gesture').addEventListener('preventleft', null)

Using in Vue.js

	<img @preventleft />
	

and ...

preventall

Simplely using event.preventDefault() to prevent all touches events's default behavior.

preventup

Only when you swipeup on the element, the event.preventDefault() is valid, and other ways, it will be not valid.

preventright

Only when you swiperight on the element, the event.preventDefault() is valid, and other ways, it will be not valid.

preventdown

Only when you swipedown on the element, the event.preventDefault() is valid, and other ways, it will be not valid.

preventleft

Only when you swipeleft on the element, the event.preventDefault() is valid, and other ways, it will be not valid.

preventlongtap

When you longtap on the element, I find a HTMLElement events contextmenu that can prevent some browser's longtap default behavior, but not useful at all browsers(such as UC browser). and For IOS devise, you may need css -webkit-touch-callout: none; to fixed it. And for all devices, you may need css property user-select: none; to prevent css default behavior.And anyway, I test the preventlongtap event on chrome and weixin, it works. so I add it for some cases you may need it.

Touch-Related information

ALl the gesture events preserve touch-related information,But how to read them?

In one-dimensional array.the each element is your touches point,and save them same as your touch time.

In Two-dimensional array, the first element is the touch point that you first touch point, and the next element is the touch point that you next touch point. And the first element is not changed after you taped,but next element amy not due to them will be changed due to your fingers move.

Add demos

I add some simple demos at this version, and you can see it at the repository github address mobile-gestures.Enjoy use it!

Note

At this version, I removed the gesture slowtap due to thinking that is not nessary and you can use the tap gesture instead.

The Blog

js移动端手势事件重写