jQuery UI API – 鼠标交互（Mouse Interaction）

优质

小牛编辑

130浏览

2023-12-01

所属类别

交互（Interactions） | 实用工具（Utilities）

用法

描述：基本交互层。

依赖：

部件库（Widget Factory）

注释：与 jQuery.Widget 相似，鼠标交互的目的不是直接使用。这是一个纯粹给其他小部件继承用的基础层。该页面有添加到 jQuery.Widget 的文档，但是它包含了不能被覆盖的内部方法。公共的 API 是 _mouseStart()、_mouseDrag()、_mouseStop() 和 _mouseCapture()。

快速导航

选项	方法	事件
cancel delay distance	_mouseCapture _mouseDelayMet _mouseDestroy _mouseDistanceMet _mouseDown _mouseDrag _mouseInit _mouseMove _mouseStart _mouseStop _mouseUp

选项类型描述默认值

cancel

Selector

选项	类型	描述	默认值
cancel	Selector	防止从指定的元素上开始交互。代码实例：初始化带有指定 `cancel` 选项的 mouse： $( ".selector" ).mouse({ cancel: ".title" }); 在初始化后，获取或设置 `cancel` 选项： // getter var cancel = $( ".selector" ).mouse( "option", "cancel" ); // setter $( ".selector" ).mouse( "option", "cancel", ".title" );	"input, textarea, button, select, option"
delay	Number	鼠标按下后直至交互开始的事件，以毫秒计。该选项可用于防止点击在一个元素上时不必要的交互。代码实例：初始化带有指定 `delay` 选项的 mouse： $( ".selector" ).mouse({ delay: 300 }); 在初始化后，获取或设置 `delay` 选项： // getter var delay = $( ".selector" ).mouse( "option", "delay" ); // setter $( ".selector" ).mouse( "option", "delay", 300 );	0
distance	Number	鼠标按下后交互开始前鼠标必须移动的距离，以像素计。该选项可用于防止点击在一个元素上时不必要的交互。代码实例：初始化带有指定 `distance` 选项的 mouse： $( ".selector" ).mouse({ distance: 10 }); 在初始化后，获取或设置 `distance` 选项： // getter var distance = $( ".selector" ).mouse( "option", "distance" ); // setter $( ".selector" ).mouse( "option", "distance", 10 );	1

防止从指定的元素上开始交互。

代码实例：

初始化带有指定 cancel 选项的 mouse：

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

在初始化后，获取或设置 cancel 选项：

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

"input, textarea, button, select, option"

delay

Number

鼠标按下后直至交互开始的事件，以毫秒计。该选项可用于防止点击在一个元素上时不必要的交互。

代码实例：

初始化带有指定 delay 选项的 mouse：

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

在初始化后，获取或设置 delay 选项：

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

distance

Number

鼠标按下后交互开始前鼠标必须移动的距离，以像素计。该选项可用于防止点击在一个元素上时不必要的交互。

代码实例：

初始化带有指定 distance 选项的 mouse：

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

在初始化后，获取或设置 distance 选项：

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

方法	返回	描述
_mouseCapture()	Boolean	决定交互是否应该基于交互的事件目标开始。默认的实现总是返回 `true`。该方法不接受任何参数。代码实例：调用 _mouseCapture 方法： $( ".selector" ).mouse( "_mouseCapture" );
_mouseDelayMet()	Boolean	决定 `delay` 选项是否满足当前交互。该方法不接受任何参数。代码实例：调用 _mouseDelayMet 方法： $( ".selector" ).mouse( "_mouseDelayMet" );
_mouseDestroy()	jQuery (plugin only)	销毁交互事件处理程序。这必须调用来自扩展的小部件的 `_destroy()` 方法。该方法不接受任何参数。代码实例：调用 _mouseDestroy 方法： $( ".selector" ).mouse( "_mouseDestroy" );
_mouseDistanceMet()	Boolean	决定 `distance` 选项是否满足当前交互。该方法不接受任何参数。代码实例：调用 _mouseDistanceMet 方法： $( ".selector" ).mouse( "_mouseDistanceMet" );
_mouseDown()	jQuery (plugin only)	处理交互的开始。确认与主要的鼠标按钮关联的事件，确保 `delay` 与 `distance` 在交互启动之前得到满足。当交互已经准备开始，为要处理的扩展小部件调用 `_mouseStart` 方法。该方法不接受任何参数。代码实例：调用 _mouseDown 方法： $( ".selector" ).mouse( "_mouseDown" );
_mouseDrag()	jQuery (plugin only)	扩展小部件应实现一个 `_mouseDrag()` 方法，来处理交互的每个移动。该方法将接收与鼠标移动相关联的鼠标事件。该方法不接受任何参数。代码实例：调用 _mouseDrag 方法： $( ".selector" ).mouse( "_mouseDrag" );
_mouseInit()	jQuery (plugin only)	初始化交互事件处理程序。这必须调用来自扩展的小部件的 `_create()` 方法。该方法不接受任何参数。代码实例：调用 _mouseInit 方法： $( ".selector" ).mouse( "_mouseInit" );
_mouseMove()	jQuery (plugin only)	处理交互的每个移动。为要处理的扩展小部件调用 _mouseDrag 方法。该方法不接受任何参数。代码实例：调用 _mouseMove 方法： $( ".selector" ).mouse( "_mouseMove" );
_mouseStart()	jQuery (plugin only)	扩展小部件应实现一个 `_mouseStart()` 方法，来处理交互的开始。该方法将接收与交互开始相关联的鼠标事件。该方法不接受任何参数。代码实例：调用 _mouseStart 方法： $( ".selector" ).mouse( "_mouseStart" );
_mouseStop()	jQuery (plugin only)	扩展小部件应实现一个 `_mouseStop()` 方法，来处理交互的结束。该方法将接收与交互结束相关联的鼠标事件。该方法不接受任何参数。代码实例：调用 _mouseStop 方法： $( ".selector" ).mouse( "_mouseStop" );
_mouseUp()	jQuery (plugin only)	处理交互结束。对扩展小部件的处理调用 _mouseStop 方法。该方法不接受任何参数。代码实例：调用 _mouseUp 方法： $( ".selector" ).mouse( "_mouseUp" );