Mobile-side gesture event hammer. JS Plugin

first, the introduction of hammer. JS

1.:http://download.csdn.net/detail/webxiaoma/9872249
2. Website address: http://hammerjs.github.io/examples/
3.CDN Link: http://hammerjs.github.io/dist/hammer.min.js

Second, usage

1. First we write a DOM element of the departure event

Html:

   <StyleType="Text/css" > HtmlBody{Width 100%;Height 100%;Margin 0px;Padding 0px;}. Test{Width 100%; Height: 100%; background: red; text-align: Left ; color: white; } </style> <div id="test" class="Test" ></Div >                   

2. We create a new Hammer object and specify the DOM element to process when initializing

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

3. Assign a touch-screen move event to the DOM element

hammertime.on("press", function (e) {                    document.getElementById("result").innerHTML += "按压超过500ms了";});

third, the attention point Key Content

1. It is recommended to use the viewport meta tag, which gives you more control over the Web page by disabling the double quote/Zoom out feature.

<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">

2. Horizontal pan and swipe and multi-touch pinch and rotate recognition. By default, the compression and rotation recognizers are disabled because they cause elements to block, but you can enable them by calling the following:
① Method One:

 hammertime.add(new Hammer.Pinch()); hammertime.add(new Hammer.Rotate());

② Method Two:

hammertime.get(‘pinch‘).set({ enable: true });hammertime.get(‘rotate‘).set({ enable: true });//启用pan和swipe识别器的垂直方向或全方向：hammertime.get(‘pan‘).set({ direction: Hammer.DIRECTION_ALL });hammertime.get(‘swipe‘).set({ direction: Hammer.DIRECTION_VERTICAL });

The event may not be triggered if it is enabled after successful.
In addition, we can also use the remove(事件) removal of an event

hammertime.remove(‘rotate‘); // 移除旋转手势事件

Iv. Events provided

1, click the event (that is, often said Tocuh event)

Options	default	Description
Event	Pan	Event name
Pointers	1	Required pointer. 0 for all pointers.
Threshold	10	Minimum translation distance required before recognition
Direction	Direction_all	Panning direction.

Panstart Single-finger press event
Panmove event when one finger moves
Panend event when one finger is left
Pancancel gesture event is removed is triggered
Panleft Trigger when one finger is sliding down to the left
panright Trigger when one finger is sliding to the right
Panup Trigger when one finger is sliding up
Pandown Trigger when one finger is sliding down

2. Scaling Event (requires manual opening ammertime.get(‘pinch‘).set({ enable: true }); )

Options	default	Description
Event	Pinch	Event name
Pointers	2	Required pointer, minimum of 2.
Threshold	0	Min. ratio before recognition

pinch finger scaling trigger
Pinchstart trigger when finger zoom starts
pinchmove trigger when finger scaling
pinchend trigger after finger zoom ends
pinchcancel trigger when finger scaling event is cleared
Pinchin Trigger when the finger is zoomed in
pinchout Trigger when the finger is scaled outward

3. Press (Long Press) event

Options	default	Description
Event	Press	Event name
Pointers	1	Required pointer. 0 for all pointers.
Threshold	9	The minimum allowable movement when pressing.
Time	251	The compression time is measured in milliseconds

Press Finger pressed (default press 251 ms)
pressup trigger at end of finger Press

4. Rotation event (two fingers)

Options	default	Description
Event	Rotate	Event name
Pointers	2	Required pointer, minimum of 2.
Threshold	0	Min. ratio before recognition

Rotate Rotation trigger
Rotatestart trigger at start of rotation
Trigger when Rotatemove is rotated
rotateend trigger at end of rotation
Trigger when rotatecancel rotation is removed

5. Sliding screen Events

Options	default	Description
Event	Rotate	Event name
Pointers	1	Required pointer, minimum of 2.
Threshold	10	The minimum distance required before recognition.
Direction	Direction_all	Panning direction.
Velocity	0.3	The minimum speed required to identify the unit is PX/MS.

swipe slide screen trigger
Trigger when swipeleft Zoshi
Swiperight When the right slide screen is triggered
Trigger when swipeup on slide screen
swipedown trigger when slide screen

tip : When you call Hammer () to create a simple instance, the pan and slide recognizers are configured to detect only horizontal gestures. You need to configure this in a vertical direction:

hammertime.get(‘swipe‘).set({ direction: Hammer.DIRECTION_ALL });

6.TAP Click events

Options	default	Description
Event	Tap	Event name
Pointers	1	Required pointers
Taps	1	The number of taps required.
Interval	300	Maximum time between multiple taps (in MS)
Time	250	Maximum press time (MS).
Threshold	2	When doing a click, allow some gestures.
Posthreshold	10	The maximum position difference between multiple taps.

Tap Click event
DOUBLETAP Double-click Trigger

Key Content
In the above event we can change the default state of the event, such as the press event by default is 251 milliseconds trigger, we can change to 1s after the trigger.

hammertime.get(‘press‘).set({ time:1000 });

v. Event Object

There are event objects for each event:

hammertime.on("doubletap", function (e) {   document.getElementById("result").innerHTML += e; var a = console.log(e);});

The event object contains the following information:
All events triggered by Hammer receive an event object that contains the following properties.

name	value
Type	The event name is like Panstart.
DeltaX	The movement of the x-axis.
DeltaY	Y-axis movement.
Deltatime	The total time since the first input (in milliseconds).
Distance	Distance move
Angle	Angle movement.
Velocityx	The speed is on the x-axis, in px/ms units.
Velocityy	The speed on the y-axis, in px/ms units
Velocity	The speed on the y-axis, in px/ms units
Direction	Direction of movement. matches the direction constant.
Offsetdirection	The direction is removed from the starting point. matches the direction constant.
Scale	Zoom when multi-touch. 1 single-Touch.
Rotation	The rotation (DEG) that has been completed when multi-touch. 0 Click.
Center	A multi-touch center position, or just a single pointer.
Srcevent	The source event object, type Touchevent,mouseevent, or pointerevent.
Target	The destination that received the event.
PointerType	The primary pointer type, which can be touch,mouse,pen or Kinect.
EventType	The event type that matches the input constant.
IsFirst	True when the first one is entered.
IsFinal	True when the last (last) input.
Pointers	An array with all pointers, including the end Pointer (touchend,mouseup).
Changedpointers	An array with all the new/moving/missing pointers.
Preventdefault	Refer to the Srcevent.preventdefault () method. Only experts!

Mobile-side gesture event hammer. JS Plugin