The six major events of Hammer.js

1.Pan event : Within the specified Dom area, one finger drops and moves the event, which is the drag event in the touch screen. This event is more commonly used in touch screen development:

Panstart Drag to start

Panmove Drag Process

Panend Drag End

Pancancel Drag Cancel

Panleft Drag to the left

Panright Drag Right

Panup drag up

Pandown drag Down

2.Pinch event : Within the specified Dom area, two fingers (default is two fingers, multi-finger touch needs to be set separately) or more than one finger (more or less) moving or moving in opposite directions (more and more distant):

Pinstart Multi-Touch start

Pinchmove Multi-Touch process

Pinchend Multi-Touch End

Pinchcancel Multi-Touch cancellation

Pinchin the distance between two fingers when multi-touch.

Pinchout two fingers farther away when multi-touch.

3, pressevent : In the specified Dom area of the touch screen version of the Click event, this event is equivalent to the PC-side click event, the event can not contain any movement, the minimum pressing time of 500 milliseconds, commonly used in mobile phone copy, paste and other functions:

Pressup trigger When Click event is left

4.Rotate event : Within the specified Dom area, when two fingers or more fingers are rotated as a prototype (like two finger screws):

Rotatestart rotation begins

Rotatemove Rotation Process

Rotateend Rotation End

Rotatecancel rotation Cancel

5.Swipe event : Within the specified Dom area, a finger is quickly sliding on the touchscreen. That is, we usually use the most sliding events:

Swipeleft Slide Left

Swiperight Swipe Right

Swipeup Slide Up

Swipedown Slide Down

6.Tap event : Triggers the event when a finger taps or taps within the specified Dom area, and the maximum click time for this event is 250 milliseconds, which is processed by the press event over this time.

About Tap and click

On the Android touchscreen, the tap event and the Click event can be triggered simultaneously, but the Click event has a hundreds of millisecond delay, triggering the tap event and then triggering the Click event over time.

Questions about certain event listeners that cannot be triggered (such as Swipeup)

var hammertime = new Hammer (document.getElementById ("Test"));

Hammertime.add (New Hammer.swipe ());

Hammertime.on ("Swipeup", function () {...})

Hammer.js adds some common events by default when creating a new object, but not all events, and some events that are not added by default need to be monitored separately, as shown in the code above.

When an object requires multiple events, the official API and test results require multiple listeners to be added to an event:

var hammertime = new Hammer (document.getElementById ("Test"));

hammertime. Add (New Hammer.swipe ());

Hammertime.on ("Swipeup", function () {...});

var hammertime1 = new Hammer (document.getElementById ("Test"));

Hammertime.on ("Swipeleft", function () {...});

The last part of the doubt, after my test, on a hammertime can listen to multiple events, the effect of the same as the above code.

A suitable sample code:

<style>#myElement{background:Silver;Height:300px;text-align:Center;Font:30px/300px Helvetica, Arial, Sans-serif;}</style><DivID= "MyElement"></Div><Script>varmyelement=document.getElementById ('myelement');//Create a simple instance//By default, it is only adds horizontal recognizersvarMC= NewHammer (myelement);//listen to Events ...Mc.on ("panleft panright Tap Press", function(EV) {myelement.textcontent=Ev.type+"gesture detected.";});</Script>

The six major events of Hammer.js