# jQuery UI API - 鼠标交互（Mouse Interaction） ## 所属类别 [交互（Interactions）](ref-interactions.html) | [实用工具（Utilities）](ref-utilities.html) ## 用法 **描述：**基本交互层。 **依赖：** * [部件库（Widget Factory）](api-jQuery-widget.html) **注释：**与 [`jQuery.Widget`](api-jQuery-widget.html#jQuery-Widget2) 相似，鼠标交互的目的不是直接使用。这是一个纯粹给其他小部件继承用的基础层。该页面有添加到 `jQuery.Widget` 的文档，但是它包含了不能被覆盖的内部方法。公共的 API 是 [`_mouseStart()`](#method-_mouseStart)、[`_mouseDrag()`](#method-_mouseDrag)、[`_mouseStop()`](#method-_mouseStop) 和 [`_mouseCapture()`](#method-_mouseCapture)。 ### 快速导航 | 选项 | 方法 | 事件 | | --- | --- | --- | | [cancel](#option-cancel)[delay](#option-delay)[distance](#option-distance) | [_mouseCapture](#method-_mouseCapture)[_mouseDelayMet](#method-_mouseDelayMet)[_mouseDestroy](#method-_mouseDestroy)[_mouseDistanceMet](#method-_mouseDistanceMet)[_mouseDown](#method-_mouseDown)[_mouseDrag](#method-_mouseDrag)[_mouseInit](#method-_mouseInit)[_mouseMove](#method-_mouseMove)[_mouseStart](#method-_mouseStart)[_mouseStop](#method-_mouseStop)[_mouseUp](#method-_mouseUp) | #### 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 #### 方法 #### _mouseCapture() **类型**：Boolean **描述**：决定交互是否应该基于交互的事件目标开始。默认的实现总是返回 `true`。 * 该方法不接受任何参数。 **代码实例：** 调用 _mouseCapture 方法： ``` $( ".selector" ).mouse( "_mouseCapture" ); ``` #### _mouseDelayMet() **类型**：Boolean **描述**：决定 `[delay](#option-delay)` 选项是否满足当前交互。 * 该方法不接受任何参数。 **代码实例：** 调用 _mouseDelayMet 方法： ``` $( ".selector" ).mouse( "_mouseDelayMet" ); ``` #### _mouseDestroy() **类型**：jQuery (plugin only) **描述**：销毁交互事件处理程序。这必须调用来自扩展的小部件的 `_destroy()` 方法。 * 该方法不接受任何参数。 **代码实例：** 调用 _mouseDestroy 方法： ``` $( ".selector" ).mouse( "_mouseDestroy" ); ``` #### _mouseDistanceMet() **类型**：Boolean **描述**：决定 `[distance](#option-distance)` 选项是否满足当前交互。 * 该方法不接受任何参数。 **代码实例：** 调用 _mouseDistanceMet 方法： ``` $( ".selector" ).mouse( "_mouseDistanceMet" ); ``` #### _mouseDown() **类型**：jQuery (plugin only) **描述**：处理交互的开始。确认与主要的鼠标按钮关联的事件，确保 `[delay](#option-delay)` 与 `[distance](#option-distance)` 在交互启动之前得到满足。当交互已经准备开始，为要处理的扩展小部件调用 `[_mouseStart](#method-_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](#method-_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](#method-_mouseStop) 方法。 * 该方法不接受任何参数。 **代码实例：** 调用 _mouseUp 方法： ``` $( ".selector" ).mouse( "_mouseUp" ); ```