Mouse interaction

The base interaction layer.

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().

Dependencies

Widget Factory

cancel

Type: Selector

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

Prevents interactions from starting on specified elements.

Code examples:

Initialize the mouse with the cancel option specified:

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

Get or set the cancel option, after initialization:

// Getter
var cancel = $( ".selector" ).mouse( "option", "cancel" );
  
// Setter
$( ".selector" ).mouse( "option", "cancel", ".title" );

delay

Type: 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 mouse with the delay option specified:

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

Get or set the delay option, after initialization:

// Getter
var delay = $( ".selector" ).mouse( "option", "delay" );
  
// Setter
$( ".selector" ).mouse( "option", "delay", 300 );

distance

Type: 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 mouse with the distance option specified:

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

Get or set the distance option, after initialization:

// Getter
var distance = $( ".selector" ).mouse( "option", "distance" );
  
// Setter
$( ".selector" ).mouse( "option", "distance", 10 );

_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:

1	`$(` `".selector"` `).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:

1	`$(` `".selector"` `).mouse(` `"_mouseDelayMet"` `);`

_mouseDestroy()Returns: jQuery (plugin only)

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:

1	`$(` `".selector"` `).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:

1	`$(` `".selector"` `).mouse(` `"_mouseDistanceMet"` `);`

_mouseDown()Returns: jQuery (plugin only)

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:

1	`$(` `".selector"` `).mouse(` `"_mouseDown"` `);`

_mouseDrag()Returns: jQuery (plugin only)

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:

1	`$(` `".selector"` `).mouse(` `"_mouseDrag"` `);`

_mouseInit()Returns: jQuery (plugin only)

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:

1	`$(` `".selector"` `).mouse(` `"_mouseInit"` `);`

_mouseMove()Returns: jQuery (plugin only)

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:

1	`$(` `".selector"` `).mouse(` `"_mouseMove"` `);`

_mouseStart()Returns: jQuery (plugin only)

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:

1	`$(` `".selector"` `).mouse(` `"_mouseStart"` `);`

_mouseStop()Returns: jQuery (plugin only)

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:

1	`$(` `".selector"` `).mouse(` `"_mouseStop"` `);`

_mouseUp()Returns: jQuery (plugin only)

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:

1	`$(` `".selector"` `).mouse(` `"_mouseUp"` `);`

Links:

http://api.jqueryui.com/mouse

doc_jQuery

2025-01-10 15:47:30

Comments