Mouse gesture events

Non-standard
This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

Gecko 1.9.1 added support for several Mozilla-specific DOM events used to handle mouse gestures. These are special movements that can be made with a mouse or trackpad and can be interpreted to perform specific tasks.

Note: These gesture events are available to add-ons and other browser chrome code, but are never sent to regular web page content.

Note: Some operating systems, including Mac OS X and Windows 7, provide default actions when gesture events occur. If you handle a gesture event and wish to prevent the default action from taking place as well, be sure to call the event's preventDefault() method.

Types of gesture events

MozSwipeGesture

The MozSwipeGesture event is sent when the user uses three fingers to "swipe" the trackpad.

MozMagnifyGestureStart

The MozMagnifyGestureStart event is sent when the user begins performing a "pinch" gesture, by using two fingers as the corners of a rectangle and moving them either closer together or farther apart. This is typically used to zoom in and out on content (this is the default behavior in Firefox, for example).

MozMagnifyGestureUpdate

The MozMagnifyGestureUpdate event is sent periodically while processing a magnify gesture, to provide updated status information. The event's delta value represents the amount by which the gesture has moved since the MozMagnifyGestureStart or MozMagnifyGestureUpdate event.

Note: This event is sent whenever the movement of the user's fingers exceeds the number of pixels indicated by the browser.gesture.pinch.threshold preference.

MozMagnifyGesture

The MozMagnifyGesture event is sent when the user completes a "pinch" gesture. If you only care about the end results of the pinch gesture, you can simply watch for this event; however, if you want to provide feedback during the handling of the gesture, you should also watch the MozMagnifyGestureStart and MozMagnifyGestureUpdate events.

The delta value is the cumulative change over the course of handling the entire sequence of magnify gesture events.

MozRotateGestureStart

The MozRotateGestureStart event is sent when the user begins performing a rotate gesture, by placing two fingers on the trackpad and rotating them around the center of the trackpad. Firefox uses this gesture to move backward and forward through the tabs in the current window.

MozRotateGestureUpdate

The MozRotateGestureUpdate event is sent periodically while processing a rotate gesture, to provide updated status information. The event's delta value represents the amount by which the gesture has moved since the MozRotateGestureStart or MozRotateGestureUpdate event.

Note: This event is sent whenever the movement of the user's fingers exceeds the number of pixels indicated by the browser.gesture.pinch.threshold preference.

MozRotateGesture

The MozRotateGesture event is sent when the user completes a rotate gesture. If you only care about the end results of the rotate gesture, you can simply watch for this event; however, if you want to provide feedback during the handling of the gesture, you should also watch the MozRotateGestureStart and MozRotateGestureUpdate events.

The delta value is the cumulative change over the course of handling the entire sequence of rotate gesture events.

Event fields

Mouse gesture events have additional fields providing information about the gesture. These are:

direction: The direction in which the swipe moved.
delta: The amount by which the gesture moved; for rotation, this value is in degrees. Positive values are clockwise and negative values are counterclockwise. For magnification, this value is implementation-specific, but the value is positive for zooming in and negative for zooming out.

Direction constants

The direction field in the gesture events can take one of the following values:

SimpleGestureEvent.DIRECTION_LEFT: Leftward swipe.
SimpleGestureEvent.DIRECTION_RIGHT: Rightward swipe.
SimpleGestureEvent.DIRECTION_UP: Upward swipe.
SimpleGestureEvent.DIRECTION_DOWN: Downward swipe.
SimpleGestureEvent.ROTATION_COUNTERCLOCKWISE: Counter-clockwise rotation.
SimpleGestureEvent.ROTATION_CLOCKWISE: Clockwise rotation.