jQuery UI API - Mouse Interaction
Category
Usage
Description: Basic interaction layer.
Dependencies:
Note: Similar to jQuery.Widget, the purpose of mouse interaction is not to be used directly. This is a purely foundational layer for other widgets to inherit from. This page adds documentation to jQuery.Widget, but it includes internal methods that should not be overridden. The public API consists of _mouseStart(), _mouseDrag(), _mouseStop(), and _mouseCapture().
Quick Navigation
| Options | Methods | Events |
|---|---|---|
| cancel delay distance | _mouseCapture _mouseDelayMet _mouseDestroy _mouseDistanceMet _mouseDown _mouseDrag _mouseInit _mouseMove _mouseStart _mouseStop _mouseUp |
| Option | Type | Description | Default Value |
|---|---|---|---|
| cancel | Selector | Prevents interactions from starting on specified elements. <br> Code example: Initialize mouse with the specified cancel option: $( ".selector" ).mouse({ cancel: ".title" }); After initialization, get or set the cancel option: // getter<br>var cancel = $( ".selector" ).mouse( "option", "cancel" );<br> <br>// setter<br>$( ".selector" ).mouse( "option", "cancel", ".title" ); | "input, textarea, button, select, option" |
| delay | Number | The number of milliseconds after mousedown until the interaction starts. This option can be used to prevent unwanted interactions when clicking on an element. <br> Code example: Initialize mouse with the specified delay option: $( ".selector" ).mouse({ delay: 300 }); After initialization, get or set the delay option: // getter<br>var delay = $( ".selector" ).mouse( "option", "delay" );<br> <br>// setter<br>$( ".selector" ).mouse( "option", "delay", 300 ); | 0 |
| distance | Number | The number of pixels the mouse must move before the interaction starts, after mousedown. This option can be used to prevent unwanted interactions when clicking on an element. <br> Code example: Initialize mouse with the specified distance option: $( ".selector" ).mouse({ distance: 10 }); After initialization, get or set the distance option: // getter<br>var distance = $( ".selector" ).mouse( "option", "distance" );<br> <br>// setter<br>$( ".selector" ).mouse( "option", "distance", 10 ); | 1 |
| Method | Returns | Description |
|---|---|---|
| _mouseCapture() | Boolean | Determines whether the interaction should start based on the event target. The default implementation always returns true. <br> This method does not accept any parameters. Code example: Call the _mouseCapture method: $( ".selector" ).mouse( "_mouseCapture" ); |
| _mouseDelayMet() | Boolean | Determines if the delay option is met for the current interaction. <br> This method does not accept any parameters. Code example: Call the _mouseDelayMet method: $( ".selector" ).mouse( "_mouseDelayMet" ); |
| _mouseDestroy() | jQuery (plugin only) | Destroys the interaction event handlers. This must be called from the extending widget's _destroy() method. <br> This method does not accept any parameters. Code example: Call the _mouseDestroy method: $( ".selector" ).mouse( "_mouseDestroy" ); |
| _mouseDistanceMet() | Boolean | Determines if the distance option is met for the current interaction. <br> This method does not accept any parameters. Code example: Call the _mouseDistanceMet method: $( ".selector" ).mouse( "_mouseDistanceMet" ); |
| _mouseDown() | jQuery (plugin only) | Handles the start of the interaction. Confirms events associated with the primary mouse button, ensuring delay and distance are met before the interaction starts. Calls the _mouseStart method for the extending widget to be processed when the interaction is ready to begin. <br> This method does not accept any parameters. Code example: Call the _mouseDown method: $( ".selector" ).mouse( "_mouseDown" ); |
| _mouseDrag() | jQuery (plugin only) | The extending widget should implement a _mouseDrag() method to handle each move of the interaction. This method will receive the mouse event associated with the mouse move. <br> This method does not accept any parameters. Code example: Call the _mouseDrag method: $( ".selector" ).mouse( "_mouseDrag" ); |
| _mouseInit() | jQuery (plugin only) | Initializes the interaction event handlers. This must be called from the extending widget's _create() method. <br> This method does not accept any parameters. Code example: Call the _mouseInit method: $( ".selector" ).mouse( "_mouseInit" ); |
| _mouseMove() | jQuery (plugin only) | Handles each move of the interaction. Calls _mouseDrag for the extending widget to be processed. <br> This method does not accept any parameters. Code example: Call the _mouseMove method: $( ".selector" ).mouse( "_mouseMove" ); |
| _mouseStart() | jQuery (plugin only) | The extending widget should implement a _mouseStart() method to handle the start of the interaction. This method will receive the mouse event associated with the interaction start. <br> This method does not accept any parameters. Code example: Call the _mouseStart method: $( ".selector" ).mouse( "_mouseStart" ); |
| _mouseStop() | jQuery (plugin only) | The extending widget should implement a _mouseStop() method to handle the end of the interaction. This method will receive the mouse event associated with the interaction end. <br> This method does not accept any parameters. Code example: Call the _mouseStop method: $( ".selector" ).mouse( "_mouseStop" ); |
| _mouseUp() | jQuery (plugin only) | Handles the end of the interaction. Calls _mouseStop for the extending widget to be processed. <br> This method does not accept any parameters. Code example: Call the _mouseUp method: $( ".selector" ).mouse( "_mouseUp" ); |