Analysis of mobile development Framework (i) Hammer professional gesture control

have been writing the source code of jquery tutorial, there is no time to study other frameworks. Hammer is a gesture library of my project, Early 1.x version of the swipe incident response is not sensitive to the problem and changed the source, 2.x has been corrected, and the source of the structure of the entire renovation, no matter from the logical or organizational structure, I personally feel the need to go deep, so as a series of tutorials to learn together.

This chapter mainly explains the use, because the official API is English, the Chinese material is relatively few, the source code analysis follow up again updates.

Through the network side of the tutorial or there are many places are not very clear, may need to look at the source code to understand the later.

Hammer.js is a JavaScript library dedicated to controlling and customizing gestures. It can identify common touch, drag, long press, zoom, and so on, for those who want to handle gestures on the Web page should be very helpful.

The official also indicated that the 2.0 version was completely rewritten, including gesture recognizers, and improved support for recent mobile browsers leveraging Touch-action CSS properties. Multiple devices are also supported, making it possible for multiple users. More powerful in function.

It's easy to use, introduce the source code and create an instance.

Hammer

var New Hammer (myelement, myoptions); Hammertime.on (function(EV) {    console.log (EV);});

The default settings are automatically added, with taps, Doubletap, press,pan and swipe sliding horizontally, multi-touch pinch and rotate gestures.

The pinch and rotate recognizers are disabled by default because they have an element blocking, but we can turn it on manually:

true }); Hammertime.get (True });

Of course, we can also open the vertical slide for pan and swipe

Hammertime.get (' Pan '). Set ({Direction:Hammer.DIRECTION_ALL}), Hammertime.get (' swipe '). Set ({direction: Hammer.direction_vertical

We can disable DOUBLETAP/touch amplification with meta tags. But the new browser supports the Touch-action property so you don't need this.

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

1. Basic implementation

Binds a simple swipe event to get the response of the event via a callback

var New Hammer (EL); Mc.on (' swipe ',function(evt) {    console.log (evt)})

2. Change the direction of event handling

However, by default, Hammer is shielded from the upper and lower sliding responses, so if we only refer to vertical responses, we need to configure the settings in the

Mc.get (' Pan '). Set ({    Direction:Hammer.DIRECTION_VERTICAL}), Mc.on (' swipe ',function(evt ) {    console.log (evt)})

We can also respond to both horizontal and vertical, and in addition, can be configured separately for a specified recognizer

var New Hammer (EL); Mc.get (' swipe '). Set ({    Direction:Hammer.DIRECTION_ALL}); Mc.on (' swipe pan ',  function(evt) {    console.log (evt)})

With the Get method we can get the specified corresponding recognizer, we only give swipe start up and down left and right sliding response, then the pan event is not opened, this specific event processing is quite flexible

Of course, these are relatively simple and common event handling, if you bind a number of different event processing, it can introduce Hammer.manager control

3.hammer.manager

We can set up an instance of our recognizer through this manager . You can set more of the recognized gestures.

A complex multi-event processing Example https://cdn.rawgit.com/hammerjs/hammer.js/master/tests/manual/visual.html

var New  New Hammer.pan ({direction:Hammer.DIRECTION_ALL, threshold:0new Hammer.tap ({ Event: ' Quadrupletap ', Taps:4 }); Mc.on ("Pan", Handlepan); Mc.on ("Quadrupletap", handletaps);

The example above creates an instance containing a pan and a quadrupletap gesture

Of course, if we bind multiple events to an element with new Hammer (EL) At the same time, it is also possible to pass the on method directly.

But the actual test results, the recognition degree and flexibility is much lower than Hammer.manager.

Because the manager controls, it introducesrecognizeWith与requireFailure用来关联2个相近的事件，从而提高可用性

var New hammer.pinch (); var New hammer.rotation ();p inch.recognizewith (rotate);

Of course, the specific internal how to achieve, to wait until the source decomposition to know. The official instructions are really too few.

Finally, officials also mentioned the provision of a mysterioushammer.input事件，在每一次有用户交互的时候都会被触发，可以得到非常有用的数据

function (EV) {   console.log (ev.pointers);});

In addition, there are a lot of parameters

such as event object, directions direction, input action inputs events, recognizer status, etc.

The method provided Utils

SimilaraddEventListener的事件绑定与销毁

function (EV) {    console.log (ev.type);});

Traverse

function (item, index, SRC) { });

Merging

var options = {    false}; var defaults = {    true,    true,    c: [A. ]}; Hammer.merge (options, defaults); // OPTIONS.A = = True // options.b = = False // OPTIONS.C = = [+]

EXTEND,INHERIT,BINDFN, wait.

Hammerjs is really strong, do the most of the equipment on the market, I can see the source code on the adaptation of nearly half, the structure of the whole source code is actually relatively regular

Most people can use 1, 2 steps to deal with is completely enough, but this is not the focus, the focus is not to use, but also to "build the wheel" to understand the principle!

Analysis of mobile development Framework (i) Hammer professional gesture control