jQuery UI mouse documentation

## Mouse Interaction

Description: The base interaction layer.

## QuickNav

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