The `event-gestures` rollup module provides gesture events such as "flick" and "gesturemove", which normalize user interactions across touch and mouse or pointer based input devices. `event-gestures` is comprised of two modules - `event-flick` and `event-move`.
The `event-flick` module provides a "flick" event which notifies users interested in a "flick" gesture, providing distance, time and velocity information. Listening to a "flick" event is easy:
``` node.on("flick", function (event) { Y.log("I was flicked!"); }); ```To configure the firing of the "flick" event, you can pass in an optional configuration object. Check the API Docs for a full list of keys that can be supplied into the config object.
The `event-move` module provides "gesturemovestart", "gesturemove" and "gesturemoveend" events, which can be used to normalize drag type interactions across touch and mouse devices. These are very easy to use, but can be quite powerful.
``` node.on("gesturemovestart", function (event) { Y.log("gesturemovestart was called"); }); node.on("gesturemove", function (event) { Y.log("gesturemove was called"); }); node.on("gesturemoveend", function (event) { Y.log("gesturemoveend was called"); }); ```The `event-move` module normalizes gestures across mouse and touch environments.
| Environment | `gesturemovestart` | `gesturemove` | `gesturemoveend` |
|---|---|---|---|
| Mouse | `mousedown` | `mousemove` | `mouseup` |
| Touch | `touchstart` | `touchmove` | `touchend` |
| MSPointer | `MSPointerDown` | `MSPointerMove` | `MSPointerUp` |
By default, the "gesturemove" and "gesturemoveend" events only fire when the same node has subscribed to the "gesturemovestart" event as well. This can be over-ridden by setting `{standAlone: true}` in the configuration properties when subscribing to these events.
Generally, a "gesturemovestart" and "gesturemoveend" event fires once, while the "gesturemove" event fires repeatedly as the mouse/finger moves across the screen. Each of these events also accept a config object to control their firing. Refer to the API Docs for more information.
IE10 introduces the MSPointer events, which normalize mouse/touch/pen inputs in IE10. `event-move` takes advantage of these new events, and automatically use them on supported environments.
Another new aspect of IE10 is the `ms-touch-action` CSS property. This CSS property tells IE10 whether to permit default touch behavior or not. Examples of default touch behavior include panning the page, pinching, and double-tapping to zoom.
To prevent default behavior, Microsoft suggests setting `-ms-touch-action: none` for elements on which you do not want the default touch behavior to occur. We have filed a bugagainst IE10 regarding the prevention of default touch behavior.
If you want an element to have an `-ms-touch-action` value other than `none`, the current workaround is to set that via JavaScript inside the "gesturemovestart" event:
``` //On IE10, attaching gesturemovestart will set horizontalScrollingNode's msTouchAction property to none. horizontalScrollingNode.on("gesturemovestart", function (e) { /* * If we want to be able to swipe horizontally through the element, * but still scroll the page when we swipe horizontally or pinch-zoom, * we can set that via JavaScript in the styles property */ horizontalScrollingNode.getDOMNode().style.msTouchAction = 'pan-y | pinch-zoom'; }); ```If you wish to change the default `-ms-touch-action` value to be something other than `none`, you can change the default by modifying the `Y.Event._DEFAULT_TOUCH_ACTION`. Please note that this property may be changed in the future, depending on the resolution of and is subject to change based on the resolution of this ticket or a change in the `-ms-touch-action` implementation.
If you are using the `event-tap` or `event-flick` modules in IE10 on a touch-enabled device (ie: not mouse-based), you will need to set the `-ms-touch-action` property manually using CSS. Check out this example from Microsoft.
You do not need to do this if you are using the `event-move` module, since that has support for -ms-touch-action built-in as of YUI3.7.3. You can follow the respective tickets for `event-tap` and `event-flick`.