Mobile-side gesture library Hammer. js learning, and mobile-side gesture library hammer. js

Mobile-side gesture library Hammer. js learning, and mobile-side gesture library hammer. js

It seems that the touch, tap, and swipe events supported by the mobile terminal are not enough. In some cases, other features such as scaling and long-pressing are also used.

Recently I learned a gesture library named Hammer. js, which is a lightweight touch screen device gesture library that can recognize common touch, drag, long press, scaling, and other behaviors.

 

Follow the official documents to start learning.

 

I. Basic usage

REFERENCE The http://hammerjs.github.io/dist/hammer.min.js or download it using the <script> tag on the page

1. Page Structure:

 1     <style type="text/css"> 2         #test { 3             overflow: hidden; 4             margin: 50px auto; 5             width: 300px; 6             height: 300px; 7             border: 1px solid #ccc; 8         } 9         .one,10         .two {11             float: left;12             margin: 10px;13             width: 100px;14             height: 100px;15             text-align: center;16             line-height: 100px;17             font-size: 32px;18         }19         .one {20             background-color: #ccc;21         }22         .two {23             background-color: #999;24         }25     </style>

　　<div id="test">        <div class="one">one</div>        <div class="two">two</div>    </div>

<script src="hammer.js"></script>

2. Simple code, listening for sliding and long-pressing events

var hammerTest = new Hammer(document.getElementById('test'));hammerTest.on('pan panmove swipe swipeup press pressup', function(ev) {    console.log(ev.type);});

 

II. Introduction to event classification and usage

hammerTest.on('pan panstart panmove panend pancancel panleft panright panup pandown swipe swipeleft swiperight swipeup swipedown tap doubletap press pressup rotate rotatestart rotatemove rotateend rotatecancel pinch pinchstart pinchmove pinchend pinchcancel pinchin pinchout', function(ev) {    console.log(ev.type);});

1. pan class (Translation)

• Pan
• Panstart
• Panmove
• Panend
• Pancancel
• Panleft
• Panright
• Panup
• Pandown

The vertical translation operation is generally used to scroll the page, so the official suggestions should pay attention

 

2. pinch class (pinch zoom)

• Pinch
• Pinchstart
• Pinchmove
• Pinchend
• Pinchcancel
• Pinchin
• Pinchout

By default, pinch and rotate are unavailable because they may cause the elements to get stuck.

hammerTest.get('pinch').set({    enable: true});hammerTest.get('rotate').set({    enable: true});

 

3. press (press)

• Press
• Pressup

 

4. rotate class (rotating)

• Rotate
• Rotatestart
• Rotatemove
• Rotateend
• Rotatecancel

 

5. swipe class (slide)

• Swipe
• Swipeleft
• Swiperight
• Swipeup
• Swipedown

The vertical sliding operation is generally used to scroll the page. Therefore, the event action of up and down is not enabled by default in swipe. You must first set the direction.

hammerTest.get('swipe').set({    direction: Hammer.DIRECTION_ALL});

The corresponding values of all directions

 

6. tap class (touch and click)

• Tap
• Doubletap

 

7. Custom

In addition to calling new Hammer (myElements, myOptions), Hammer. js also supports calling through new Hammer. Manager (myElements, myOptions ).

The myOptions parameter of the latter is actually a reader recognizer. The usage is

　　　　var mc = new Hammer.Manager(document.getElementById('test'), {            recognizers: [                [Hammer.Rotate, {                    enable: true                }],                [Hammer.Swipe, {                    direction: Hammer.DIRECTION_ALL                }],                [Hammer.Pan]            ]        });        mc.on('press pan rotate swipe', function(ev) {            console.log(ev.type);        });

This method can also be used for custom events, such

　　　　 mc.add(new Hammer.Tap({            event: 'fourTap',            taps: 4        }));
        mc.on('fourTap', function(ev) {            console.log(ev.type);        });

This event is triggered when you click it four times in a row. In fact, you can set more parameters. For example, you can set the interval between the four clicks.

New Hammer. Tap (obj) creates a recognizer and adds it to the Manager for unified management.

 

Iii. Event-triggered Object Attributes

Third-party tools encapsulate events. They use native touch-related touch events and record the changes in the corresponding coordinate values to simulate new event behaviors.

Look at the object attributes when pinchin is taken.

Hammer. js provides a hammer. input event, which occurs in the interaction of each receiver, allowing you to process native interactions in a general usage of event listening.

hammerTest.on('pinch pinchin pinchout hammer.input', function(ev) {    console.log(ev);});

 

Iv. Tool Functions

Hammer. js also provides some practical tool functions.

For example, simple encapsulation of event listening

Hammer.on(window, "load resize scroll", function(ev) {    console.log(ev.type);});

Simple class inheritance:

function Animal(name) {    this.name = name;}function Dog() {    Animal.apply(this, arguments);}Hammer.inherit(Dog, Animal, {    bark: function() {        alert(this.name);    }});var dog = new Dog('Spaikie');dog.bark();

 

Complete reference

 

Hammer. on (element, types, handler)

Wrapper around undaddEventListenerThat accepts multiple event types.

Hammer.on(window, "load resize scroll", function(ev) {console.log(ev.type);});

Hammer. off (element, types, handler)

LikeHammer.on, This is a wrapper aroundremoveEventListenerThat accepts multiple event types.

Hammer. each (obj, handler)

Iterate an array or an object's own properties.

Hammer.each([10,20,30,40], function(item, index, src) { });Hammer.each({a:10, b:20, c:30}, function(item, key, src) { });

Hammer. merge (obj1, obj2)

Merge properties from obj2 into obj1. Properties won't be overwritten.

var options = {b: false};var defaults = {a: true,b: true,c: [1,2,3]};Hammer.merge(options, defaults);// options.a == true// options.b == false// options.c == [1,2,3]

Hammer. extend (obj1, obj2)

Extend obj1 with the properties from obj2. Properties will be overwritten.

var obj1 = {a: true,b: false,c: [1,2,3]};var obj2 = {b: true,c: [4,5,6]};Hammer.extend(obj1, obj2);// obj1.a == true// obj1.b == true// obj1.c == [4,5,6]

Hammer. inherit (child, base, [properties])

Simple class inheritance.

function Animal(name) {this.name = name;}function Dog() {Animal.apply(this, arguments);}Hammer.inherit(Dog, Animal, {bark: function() {alert(this.name);}});var dog = new Dog('Spaikie');dog.bark();

Hammer. bindFn (fn, scope)

Simple alternativeFunction.bind.

function myFunction(ev) {console.log(this === myContext); // is true}var myContext = {a: true,b: false};window.addEventListener('load', Hammer.bindFn(myFunction, myContext), false);

Hammer. prefixed (obj, name)

Get the (prefixed) property from the browser.

Hammer.prefixed(document.body.style, 'userSelect');// returns "webkitUserSelect" on Chrome 35