Introduction
Before this time, I wrote about mobile simple gestures event code, when I thought I wrote well, but six months later, the original code I still not often used, beacuse the use way is different from the js binding of the native event, people use it uncomfortable.
But now, I did it.
Using proxy, we can bind our own custom events like binding native events, and it's not surprising that we can delete events and decide on event-triggered time.
This is the repository,named mobie-gestures.
Install
As an es6 module
You can install it by using npm:
$ npm install mobile-gestures --save
and then(better in code top-level scope),
import 'mobile-gestures'
As a es5 js file
You can install by using it:
<script src='./path/mobile-gestures/dist/gestures.common.js'></script>
Usage
Now, you can use it just like using native events.for example:
Using in js script
document.getElementById('gesture').addEventListener('doubletap', (e) =>{
console.log(e)
})
Using in Vue.js
<img @scale.stop.prevent="scaleImg($event)" />
and ...
Gesture Types
tap
When you put a finger on the element and then quickly released on the element, it will trigger the tap event.The event will save the touch-related information on changedTouches, targetTouches, touches,and all of them are one-dimensional array.
doubletap
When you tap on an element twice with one finger in 300ms Quickly, it will trigger the doubletap event.The event will save the touch-related information on changedTouches, targetTouches, touches,and all of them are one-dimensional array.
longtap
When you put a finger on the element and stay in 500ms,it will trigger the longtap event.The event will save the touch-related information on changedTouches, targetTouches, touches,and all of them are one-dimensional array.
move
WHen you put one finger on the element ans move on it, it will trigger the move event.The event will save the touch-related information on changedTouches, targetTouches, touches,and all of them are two-dimensional array.
swipeup
When you put a finger on the element and swipe up, it will trigger the swipeup event.The event will save the touch-related information on changedTouches, targetTouches, touches,and all of them are two-dimensional array.
Note: During one touch, the event is triggered only one time.
swiperight
When you put a finger on the element and swipe right, it will trigger the swiperight event.The event will save the touch-related information on changedTouches, targetTouches, touches,and all of them are two-dimensional array.
Note: During one touch, the event is triggered only one time.
swipedown
When you put a finger on the element and swipe down, it will trigger the swipedown event.The event will save the touch-related information on changedTouches, targetTouches, touches,and all of them are two-dimensional array.
Note: During one touch, the event is triggered only one time.
swipeleft
When you put a finger on the element and swipe left, it will trigger the swipelwft event.The event will save the touch-related information on changedTouches, targetTouches, touches,and all of them are two-dimensional array.
Note: During one touch, the event is triggered only one time.
scale
When you put two fingers on the element and scale it, it will trigger the scale event.The event will save the touch-related information on changedTouches, targetTouches, touches,and all of them are two-dimensional array.In addition,the event also save the scale proportion on the scale property.
rotate
When you put two fingers on the element and rotate it, it will trigger the rotate event.The event will save the touch-related information on changedTouches, targetTouches, touches,and all of them are two-dimensional array.In addition,the event also save the rotate angle on the rotation property.
release
When you remove the last one finger from the element,it will trigger the release event.The event will save the touch-related information on changedTouches, targetTouches, touches,and all of them are one-dimensional array.
Prevent Events
Before the version 1.0.7, I use the event.preventDefault() at the gestures type events whicth cause some serious problems that make some scrollable elements cannot be scrollable due to the touches events's default behavior is scrolling.and to make some gestures can work and to prevent the browser default behavior,I add some prevent events to do it.It is simple and you can use it friendly.
Using in js script
document.getElementById('gesture').addEventListener('preventleft', null)
Using in Vue.js
<img @preventleft />
and ...
preventall
Simplely using event.preventDefault() to prevent all touches events's default behavior.
preventup
Only when you swipeup on the element, the event.preventDefault() is valid, and other ways, it will be not valid.
preventright
Only when you swiperight on the element, the event.preventDefault() is valid, and other ways, it will be not valid.
preventdown
Only when you swipedown on the element, the event.preventDefault() is valid, and other ways, it will be not valid.
preventleft
Only when you swipeleft on the element, the event.preventDefault() is valid, and other ways, it will be not valid.
preventlongtap
When you longtap on the element, I find a HTMLElement events contextmenu that can prevent some browser's longtap default behavior, but not useful at all browsers(such as UC browser). and For IOS devise, you may need css -webkit-touch-callout: none; to fixed it. And for all devices, you may need css property user-select: none; to prevent css default behavior.And anyway, I test the preventlongtap event on chrome and weixin, it works. so I add it for some cases you may need it.
Touch-Related information
ALl the gesture events preserve touch-related information,But how to read them?
In one-dimensional array.the each element is your touches point,and save them same as your touch time.
In Two-dimensional array, the first element is the touch point that you first touch point, and the next element is the touch point that you next touch point. And the first element is not changed after you taped,but next element amy not due to them will be changed due to your fingers move.
Add demos
I add some simple demos at this version, and you can see it at the repository github address mobile-gestures.Enjoy use it!
Note
At this version, I removed the gesture slowtap due to thinking that is not nessary and you can use the tap gesture instead.
The Blog
js移动端手势事件重写