Mobile-side gesture event hammer. JS Plugin

Source: Internet
Author: User

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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.