Mobile End script Framework Hammer.js_javascript tips

First, the preface

The mobile end frame is still in its infancy, but it has been a long time since the application of the mobile end. Although there is no need for PC-side development, but the mobile end of the web is a trend, in the process of touching the mobile-end script, the first thought is juqery. Jquery2.0 version and above has begun to bias the mobile end, such as support for H5, but the support is still not perfect, I hope JQ in the later version can gradually support.

Initially, when developing the mobile web, we used the standard syntax structure of the consortium and the native JS development, but relatively large amount of development, and each step to consider the compatibility of mobile browsers, such as the comparison of the programmer headache Big WP mobile phone, many events to the World Wide Web application to apply for a separate standard. So a good compatibility architecture can save a lot of work for developers.

The beginning of contact with mobile end of the framework also asked some of the front end of the friends, most of them in Baidu Ali and other work. Refer to everyone's suggestions after we do the project using Zepto.js (many engage in front of friends should not be unfamiliar). This framework has a big problem is not compatible with WP mobile phones, the use of zepto.js after the project, and then for WP mobile compatibility to make adjustments always feel some "outweigh", and then consulted some friends, they are in the development of the company basically give up the compatibility of WP (I can only say to WP "hehe"). After consulting to the useful hammer.js for development. We have studied the following, Hammer.js lightweight, the encapsulation is also better. It's also very convenient to use. Compatibility is also good. But the Chinese information on the net is less, the garden writes hammer less. So with this article.

This article is based on Hammer.js official website: http://hammerjs.github.io/, the version is based on v2.0.4. If the article's API has expired, please go to the official website to check the latest API. This article is only used for getting started.

Second, what is Hammer.js

Hammer.js is an open source mobile-end scripting framework that is perfect for most events that are developed at the end of the shift, such as clicks, slides, drag, multi-touch, and more. There is no need to rely on any other framework, and the entire framework is very small, and is very simple to use, as the following code example reads:

<div id= "test" class= "test" ></div> 
  <script type= "Text/javascript" > 
    // Creates a new Hammer object and specifies, on initialization, the DOM element 
    var hammertime = new Hammer (document.getElementById ("test") to be processed; 
    Specifies the touch-screen move event 
    hammertime.on ("Pan", function (EV) { 
     //console output 
     console.log (EV) for this DOM element 
    ); 

Iii. Event Architecture

Hammer.js mainly for the touch screen of the 6 major events to monitor. As shown in the following illustration:

1. Pan event: within the specified Dom area, one finger drops and moves the event, that is, the drag event in the touch screen. This event in the touchscreen development is more commonly used, such as: Left drag, right drag, such as the hand to use QQ on the right to appear function menu effect. The event can also be monitored and processed separately for the following events: Panstart: Drag Start, Panmove: Drag process, Panend: Drag End, Pancancel: Drag Cancel, Panleft: Drag left, Panright: Drag Right, Panup: Drag Up, Pandown: drag down.

2. Pinch event: in the specified Dom area, two fingers (two fingers by default) or multiple fingers moving relative to (getting and going) or moving in opposite (more or less) events. The event to monitor and handle the following events: Pinchstart: Multi-point touch Start, Pinchmove: Multi-Touch process, Pinchend: Multi-Touch end, Pinchcancel: multi-touch cancellation, Pinchin: When Multi-Touch, the two fingers are getting closer and nearer, Pinchout: The two fingers are more and more far away when multi-touch.

3, press event: in the specified DOM area touch screen version of the event, this event is equivalent to the PC side click event, it can not contain any movement, the minimum pressure time of 500 milliseconds, commonly used in our mobile phone "copy, paste" and other functions. The event listens and handles the following events: Pressup: Triggered when a click event is left.

4, rotate event: in the specified Dom area, when two fingers or more fingers in the round rotation of the trigger (like two fingers screwed screws). The event listens and handles the following events: Rotatestart: Rotate Start, rotatemove: Rotate process, rotateend: Rotate end, Rotatecancel: Rotate Cancel.

5, swipe event: in the specified Dom area, a finger quickly on the touch screen slide. That is, we usually use the most sliding events. Swipeleft: Slide left, swiperight: Slide right, swipeup: Slide up, Swipedown: Slide down.

6, tap event: in the specified Dom area, a finger tap or click when the event triggers (similar to the PC-side click). The event has a maximum click time of 250 milliseconds and is handled by the press event for more than 250 milliseconds.

Experience sharing: When writing to this event someone must ask, in touch screen we use Click event is not also OK? What is the difference between this tap event and the Click event? The blogger has had this kind of doubt, at first on the touch screen to handle the Click event has been used, and did not have any problems, until one day for a company to do a micro-letter version of the "repeatedly see" small game, repeatedly looking at the business simply is the screen has a lot of pictures, When you click on two pictures of the same pattern, you can create a connecting line in the middle and then disappear after the blasting effect. The game was first done in the FF browser to do the test, the mouse clicks after the effect is very smooth, but when the game deployed to the server and mobile phone operation, the iphone and WP are very fluent, Android under no matter how the tune are cotton. At first thought is the mobile phone performance problem, but changed high with the mobile phone will still have cotton, the game is not can not play, is slow reaction. After many tests to eliminate the hardware of the phone configuration, began to suspect click event. After searching the internet, the tap and click events can be triggered at the same time on the Android touchscreen, but the Click event has a delay of hundreds of milliseconds, triggering the tap event and triggering the Click event over a period of time. Later, the game of all click events modified into a tap incident will naturally solve the problem.

Iv. Examples of Use

1. Pan

The code is as follows

 <! DOCTYPE html>  

The effect is as follows:

2, Pinch

The code is as follows:

 <! DOCTYPE html>  

The effect is as follows:

3. Press

The code is as follows:

 <! DOCTYPE html>  

The effect is as follows:

4, Rotate

The code is as follows:

 <! DOCTYPE html>  

The effect is as follows:

5, swipe

The code is as follows:

<! DOCTYPE html>  

The effect is as follows:

6, Tab

The code is as follows:

<! DOCTYPE html>  

The effect is as follows:

The above examples are still different. In the Pinch and Rotate events, we used Hammertime.add (new Hammer.pinch ()) and Hammertime.add (New Hammer.rotate ()), while four other events were not used, Instead, the listener for the event is added directly. The reason is that when we were in new Hammer (HtmlElement), hammer.js the pan, press, swipe, and tab events by default. But there is no monitoring of pinch and rotate events.

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.