JQuery. event. swipe plugin supports gesture operation slides

JQuery. event. swipe is a Jquery plug-in that allows slide to support gesture operations. It can customize touch events and prevent browser click events. It is of great help for image display slide development in mobile development, A lightweight JavaScript plug-in library.

JQuery. event. swipe: Jquery plug-in that allows slide to support gesture operations

Project

Github: github.com/stephen band/jquery.event.swipe
Issues: github.com/stephen band/jquery.event.swipe/issues
Dependency: github.com/stephen band/jquery.event.move

Swipe event

Swipeleft, swiperight, swipeup, swipedown
The finger is released from the contact surface (or the middle mouse button) if the finger has at least a short distance from the threshold or B) quickly. Also responds to the mouse.
Addition and performance of Swipe event objects:
E. pageX, e. pageY
The coordinates of the current page.
E. startX, e. startY
The pointer of the page coordinate starts sliding.
E. distX, e. distY
Finger movement distance
E. velocityX, e. velocityY
Speed, in pixels/MS, past several moving average events.
How to use

Var slides = jQuery ('. slides '),
I = 0;
Slides
. On ('swipeleft ', function (e ){
Slides. eq (I + 1). addClass ('active ');
})
. On ('swiperight ', function (e ){
Slides. eq (I-1). addClass ('active ');
});

The Swipe event in the MoveEnd event is thin packed; easy to reveal when the finger moves in the sliding gesture. Bottom-layer mobile event bubbles can represent them, but doing so with the Swipe event will lead to unnecessary expensive. Use Mobile events if you need more.
Slide or scroll
The Swipe event thin packaging is built on the Move Event (Stephen band.info/jquery.event.move ). By default, move events overwrite local scrolling because they recognize what you want to move instead of rolling the window to re-enable scrolling. Call e. preventDefault () inside a MoveStart processor.
In the above example, we want to be able to swipeleft and swiperight, but scroll up and down. In the processing direction of MoveStart, if the finger moves computing and event prevention is found to move or:

JQuery ('. mydiv ')
. On ('movestart', function (e ){
// If the movestart is heading off in an upwards or downwards
// Direction, prevent it so that the browser scrolls normally.
If (e. distX> e. distY & e. distX <-e. distY) |
(E. distX <e. distY & e. distX>-e. distY )){
E. preventDefault ();
  }
});
On the top of the page, view the source code.