YouTip

# jQuery UI API – Mouse Interaction ## Category (#) | (#) ## Usage **Description:** Basic interaction layer. **Dependencies:** **Note:** Similar to [`jQuery.Widget`](#), the mouse interaction is not intended for direct use. It is a base layer purely for other widgets to inherit from. This page has documentation added to `jQuery.Widget`, but it contains internal methods that cannot be overridden. The public API consists of [`_mouseStart()`](#), [`_mouseDrag()`](#), [`_mouseStop()`](#), and [`_mouseCapture()`](#). ### Quick Navigation | Options | Methods | Events | | --- | --- | --- | | (#) (#) (#) | (#) (#) (#) (#) (#) (#) (#) (#) (#) (#) (#) | | | Option | Type | Description | Default | | --- | --- | --- | --- | | cancel | Selector | Prevents interaction from starting on the specified elements. **Code examples:** Initialize mouse with a specified `cancel` option: $( ".selector" ).mouse({ cancel: ".title" }); After initialization, get or set the `cancel` option: // gettervar cancel = $( ".selector" ).mouse( "option", "cancel" ); // setter $( ".selector" ).mouse( "option", "cancel", ".title" ); | "input, textarea, button, select, option" | | delay | Number | Time in milliseconds after mousedown before the interaction starts. This option can be used to prevent unnecessary interactions when clicking on an element. **Code examples:** Initialize mouse with a specified `delay` option: $( ".selector" ).mouse({ delay: 300 }); After initialization, get or set the `delay` option: // gettervar delay = $( ".selector" ).mouse( "option", "delay" ); // setter $( ".selector" ).mouse( "option", "delay", 300 ); | 0 | | distance | Number | Distance in pixels the mouse must move before the interaction starts after mousedown. This option can be used to prevent unnecessary interactions when clicking on an element. **Code examples:** Initialize mouse with a specified `distance` option: $( ".selector" ).mouse({ distance: 10 }); After initialization, get or set the `distance` option: // gettervar distance = $( ".selector" ).mouse( "option", "distance" ); // setter $( ".selector" ).mouse( "option", "distance", 10 ); | 1 | | Method | Returns | Description | | --- | --- | --- | | _mouseCapture() | Boolean | Determines if the interaction should start based on the 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" ).mouse( "_mouseCapture" ); | | _mouseDelayMet() | Boolean | Determines if the `delay` option has been met for the current interaction. * This method does not accept any arguments. **Code examples:** Invoke the _mouseDelayMet method: $( ".selector" ).mouse( "_mouseDelayMet" ); | | _mouseDestroy() | jQuery (plugin only) | Destroys the interaction event handlers. This must call the `_destroy()` method from the extending widget. * This method does not accept any arguments. **Code examples:** Invoke the _mouseDestroy method: $( ".selector" ).mouse( "_mouseDestroy" ); | | _mouseDistanceMet() | Boolean | Determines if the `distance` option has been met for the current interaction. * This method does not accept any arguments. **Code examples:** Invoke the _mouseDistanceMet method: $( ".selector" ).mouse( "_mouseDistanceMet" ); | | _mouseDown() | jQuery (plugin only) | Handles the start of the interaction. Confirms the event associated with the primary mouse button, ensuring that `delay` and `distance` are met before the interaction starts. When the interaction is ready to start, calls the `_mouseStart` method for the extending widget to handle. * This method does not accept any arguments. **Code examples:** Invoke 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 movement. * This method does not accept any arguments. **Code examples:** Invoke the _mouseDrag method: $( ".selector" ).mouse( "_mouseDrag" ); | | _mouseInit() | jQuery (plugin only) | Initializes the interaction event handlers. This must call the `_create()` method from the extending widget. * This method does not accept any arguments. **Code examples:** Invoke the _mouseInit method: $( ".selector" ).mouse( "_mouseInit" ); | | _mouseMove() | jQuery (plugin only) | Handles each move of the interaction. Calls the (#) method for the extending widget to handle. * This method does not accept any arguments. **Code examples:** Invoke 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 start of the interaction. * This method does not accept any arguments. **Code examples:** Invoke 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 end of the interaction. * This method does not accept any arguments. **Code examples:** Invoke the _mouseStop method: $( ".selector" ).mouse( "_mouseStop" ); | | _mouseUp() | jQuery (plugin only) | Handles the end of the interaction. Calls the (#) method for the extending widget to handle. * This method does not accept any arguments. **Code examples:** Invoke the _mouseUp method: $( ".selector" ).mouse( "_mouseUp" ); |