Using event-flick

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!");
});

Configuring the Flick Event

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.

Using event-move

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");
});

Gesture events in different environments

The event-move module normalizes gestures across mouse and touch environments.

Configuring gesture events

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, Gestures, and -ms-touch-action

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.

Known Issues in IE10 Touch Mode

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.