Gesture framework of Baidu touch, touch. js, and touchtouch. js

Gesture framework of Baidu touch, touch. js, and touchtouch. js

Today, I have seen a new gesture library in casual search, which may eliminate the troubles caused by the current user's hammer. js gesture library.

It was developed by the Baidu team and is now maintained by Baidu cloud Clouda.

Official http://touch.code.baidu.com/

Minute http://touch.code.baidu.com/touch-0.2.14.min.js of CND

In my previous article, I mentioned how to use hammer. the js framework has an annoying disadvantage, that is, event binding. Only one DOM element can be bound at a time, and a NEW function is required each time. As we all know, every new time, a new space will be opened in the memory, that is, it occupies a lot of memory.

For example:

Var obj = new Hammer (document. getElementById ('element '));

Obj. on ('tap', function );

 

If so, it will cause us a lot of trouble.

So let's talk about the convenience that touch. js brings to our development today.

 

The demo provided by the official website is as follows. Interesting single-finger rotation. Of course, this can be encapsulated by the native ontouch event.

DEMO: http://touch.code.baidu.com/examples.html

Let's see how it quickly selects a DOM and binds events.

Code:

Touch. on (". div", "tap", function );

In this way, a click event is added to all DOM elements whose class is div.

 

This in the event points to the native DOM element of the event.

 

The event object is one of the most useful objects in our gestures, such as the X/Y distance and type of occurrence.

 

 

In short, it is better to use hammer. js than to use it. You need to go to the development project to see if you have encountered any problems or bugs.

 

 

His own gesture events support:

Rotate (swipe) drag (drag) hold (hold) tap/double-click (tap/doubletap)

 

 

Simple configuration is available. Touch. config ({})

 

The configuration is the switch and other of each event, such:

 

{Tap: true, // The default value is true doubleTap: true, // doubleTap. The default value is true hold: true, // hold, the default value is true holdTime: 650, // hold time length: swipe: true, // swipeTime: 300 for the swipe event switch, // the maximum duration of swipeMinDistance: 18 for triggering the swipe event, // swipe moves the smallest distance to swipeFactor: 5, // acceleration factor. The greater the value, the faster the change rate. drag: true, // The drag event switch pinch: true, // pinch event switch}


Therefore, it is a good framework as a whole. For more details, please visit the official website to see the document. After all, it is developed in China and Chinese documents are easier to use, if you have any questions during use, please contact us.