jQuery UI mouse documentation

Similar to jQuery.Widget, the mouse interaction is not intended to be used directly. It is purely a base layer for other widgets to inherit from. This page only documents what is added to jQuery.Widget, but it does include internal methods that are not intended to be overwritten. The intended public API is _mouseStart(), _mouseDrag(), _mouseStop(), and _mouseCapture().

Options

cancelType: Selector

Default: "input,textarea,button,select,option"

Prevents interactions from starting on specified elements.

Code examples:

Initialize the jQuery.ui.mouse with the cancel option specified:

$( ".selector" ).jQuery.ui.mouse({ cancel: ".title" });

Get or set the cancel option, after initialization:

// getter
var cancel = $( ".selector" ).jQuery.ui.mouse( "option", "cancel" );
 
// setter
$( ".selector" ).jQuery.ui.mouse( "option", "cancel", ".title" );

delayType: Number

Default: 0

Time in milliseconds after mousedown until the interaction should start. This option can be used to prevent unwanted interactions when clicking on an element.

Code examples:

Initialize the jQuery.ui.mouse with the delay option specified:

$( ".selector" ).jQuery.ui.mouse({ delay: 300 });

Get or set the delay option, after initialization:

// getter
var delay = $( ".selector" ).jQuery.ui.mouse( "option", "delay" );
 
// setter
$( ".selector" ).jQuery.ui.mouse( "option", "delay", 300 );

distanceType: Number

Default: 1

Distance in pixels after mousedown the mouse must move before the interaction should start. This option can be used to prevent unwanted interactions when clicking on an element.

Code examples:

Initialize the jQuery.ui.mouse with the distance option specified:

$( ".selector" ).jQuery.ui.mouse({ distance: 10 });

Get or set the distance option, after initialization:

// getter
var distance = $( ".selector" ).jQuery.ui.mouse( "option", "distance" );
 
// setter
$( ".selector" ).jQuery.ui.mouse( "option", "distance", 10 );

Methods

_mouseCapture()Returns: Boolean

Determines whether an interaction should start based on event target of the interaction. The default implementation always returns true.

This method does not accept any arguments.

Code examples:

Invoke the _mouseCapture method:

$( ".selector" ).jQuery.ui.mouse( "_mouseCapture" );

_mouseDelayMet()Returns: Boolean

Determines whether the delay option has been met for the current interaction.

This method does not accept any arguments.

Code examples:

Invoke the _mouseDelayMet method:

$( ".selector" ).jQuery.ui.mouse( "_mouseDelayMet" );

_mouseDestroy()

Destroys the interaction event handlers. This must be called from the extending widget's _destroy() method.

This method does not accept any arguments.

Code examples:

Invoke the _mouseDestroy method:

$( ".selector" ).jQuery.ui.mouse( "_mouseDestroy" );

_mouseDistanceMet()Returns: Boolean

Determines whether the distance option has been met for the current interaction.

This method does not accept any arguments.

Code examples:

Invoke the _mouseDistanceMet method:

$( ".selector" ).jQuery.ui.mouse( "_mouseDistanceMet" );

_mouseDown()

Handles the beginning of an interaction. Verifies that the event is associated with the primary mouse button and ensures that the delay and distance options are met prior to starting the interaction. When the interaction is ready to start, invokes the _mouseStart() method for the extending widget to handle.

This method does not accept any arguments.

Code examples:

Invoke the _mouseDown method:

$( ".selector" ).jQuery.ui.mouse( "_mouseDown" );

_mouseDrag()

The extending widget should implement a _mouseDrag() method to handle each movement of an interaction. This method will receive the mouse event associated with the movement.

This method does not accept any arguments.

Code examples:

Invoke the _mouseDrag method:

$( ".selector" ).jQuery.ui.mouse( "_mouseDrag" );

_mouseInit()

Initializes the interaction event handlers. This must be called from the extending widget's _create() method.

This method does not accept any arguments.

Code examples:

Invoke the _mouseInit method:

$( ".selector" ).jQuery.ui.mouse( "_mouseInit" );

_mouseMove()

Handles each movement of the interaction. Invokes the mouseDrag() method for the extending widget to handle.

This method does not accept any arguments.

Code examples:

Invoke the _mouseMove method:

$( ".selector" ).jQuery.ui.mouse( "_mouseMove" );

_mouseStart()

The extending widget should implement a _mouseStart() method to handle the beginning of an interaction. This method will receive the mouse event associated with the start of the interaction.

This method does not accept any arguments.

Code examples:

Invoke the _mouseStart method:

$( ".selector" ).jQuery.ui.mouse( "_mouseStart" );

_mouseStop()

The extending widget should implement a _mouseStop() method to handle the end of an interaction. This method will receive the mouse event associated with the end of the interaction.

This method does not accept any arguments.

Code examples:

Invoke the _mouseStop method:

$( ".selector" ).jQuery.ui.mouse( "_mouseStop" );

_mouseUp()

Handles the end of the interaction. Invokes the mouseStop() method for the extending widget to handle.

This method does not accept any arguments.

Code examples:

Invoke the _mouseUp method:

$( ".selector" ).jQuery.ui.mouse( "_mouseUp" );