PxTouch is a jQuery plugin designed to normalize mouse and touch events across all modern browsers. Our goal is to make is easier to create touch enabled sites that work everywhere. We support simple touch events along with a set of multi-touch gestures.
Scenario: a user is reading an article contained inside an div. The following code adds a pinch-to-close gesture to the article element:
We've created a drawing sample that will log all pointer and gesture related events. Try using your mouse to draw on the canvas and then try experimenting with gestures on a touch device.
PxTouch is separated into several pieces. Developers can pick and choose which features they would like to use.
The core component consolidates mouse, touch, and pen events into a single pointer event. This follows the MSPointer model introduced in IE10 and later submitted for consideration as an W3C open standard. In IE10, we simply listen to MSPointer events. In IE11, we listen to the W3C proposed standard pointer* style events. For other browers, we normalize mouse and touch events.
This component listens to the pointer* events and provides some common functionality to enable higher level gestures. Gesture events are built with multi-touch in mind and keep track of each pointer individually.
Most browsers will synthesize a click event at the end of a gesture. This ensures that sites which use click events will still work correctly. However, sometimes you don’t want a gesture to trigger a click event (example: swiping in a newsreader should not trigger a click if the swipe ends over a link).
Of course you can cancel the default behavior which will prevent the click, but in some cases that can cause issues (kills scrolling in some browsers and you have to be careful not to disable an intended tap by the user). For these cases, its better to listen to a gesture-aware tap event instead of the native click event.
In addition to a tap event, we also have a hold event which can detect when the user holds a pointer in the same place. We’ll fire a holdstart event after half a second and then fire an holdend event when the user either lifts their finger or drags away.
Listening to the base gesture events we can detect when the user uses two fingers in a pinching or expanding motion.
Listens to base gesture events and and fires once the user begins to move one or more pointers in the same path. Pointers should be relatively close to each other during the entire path.
Builds on top of the drag events. Gesture must meet the drag preconditions and additionally we ensure that the gesture is progressing in the same general direction.
Copyright (c) 2013 Pixel Lab
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.