🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
# Mouse Interaction Categories: [Interactions](http://www.css88.com/jquery-ui-api/category/interactions/ "View all posts in Interactions") | [Utilities](http://www.css88.com/jquery-ui-api/category/utilities/ "View all posts in Utilities") **Description:** 底层的交互组件 ## QuickNav ### Options + [cancel](#option-cancel) + [delay](#option-delay) + [distance](#option-distance) ### Methods + [_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) ### Events 像 [`jQuery.Widget`](/jQuery.Widget#jQuery-Widget2), Mouse Interaction(鼠标交互)的目的不是直接使用。这纯粹是一个让其他部件(widget)继承基础组件。这个页面只文档被添加到`jQuery.Widget`,但它包括不打算被重写的内部方法。对外公开的API 是[`_mouseStart()`](#method-_mouseStart), [`_mouseDrag()`](#method-_mouseDrag), [`_mouseStop()`](#method-_mouseStop), 和 [`_mouseCapture()`](#method-_mouseCapture). ### Dependencies * [Widget Factory](/jQuery.widget/) ## Options ### cancel**Type:** [Selector](http://api.jquery.com/Types/#Selector) **Default:** `"input,textarea,button,select,option"`防止在指定的元素上相互作用。**Code examples:** 使用指定的 `cancel` 参数初始化一个: ``` $( ".selector" ).mouse({ cancel: ".title" }); ``` 在初始化后设置或者获取`cancel` 参数: ``` // getter var cancel = $( ".selector" ).mouse( "option", "cancel" ); // setter $( ".selector" ).mouse( "option", "cancel", ".title" ); ``` ### delay**Type:** [Number](http://api.jquery.com/Types/#Number) **Default:** `0`时间(以毫秒为单位),当鼠标按下后直到的互动(interactions)激活。此选项可用来阻止当点击一个元素时可能发生的非期望互动(interactions)行为。**Code examples:** 使用指定的 `delay` 参数初始化一个: ``` $( ".selector" ).mouse({ delay: 300 }); ``` 在初始化后设置或者获取`delay` 参数: ``` // getter var delay = $( ".selector" ).mouse( "option", "delay" ); // setter $( ".selector" ).mouse( "option", "delay", 300 ); ``` ### distance**Type:** [Number](http://api.jquery.com/Types/#Number) **Default:** `1`当鼠标点下后,只有移动指定像素后才开始激活互动(interactions)动作,单位为像素。此选项可用来阻止当点击一个元素时可能发生的非期望拖动行为。**Code examples:** 使用指定的 `distance` 参数初始化一个: ``` $( ".selector" ).mouse({ distance: 10 }); ``` 在初始化后设置或者获取`distance` 参数: ``` // getter var distance = $( ".selector" ).mouse( "option", "distance" ); // setter $( ".selector" ).mouse( "option", "distance", 10 ); ``` ## Methods ### _mouseCapture()Returns: [Boolean](http://api.jquery.com/Types/#Boolean) 确定一个互动(interaction)是否基于事件目标元素。默认总是返回 `true`。 * 这个方法不接受任何参数。 **Code examples:** 调用 _mouseCapture 方法: ``` $( ".selector" ).mouse( "_mouseCapture" ); ``` ### _mouseDelayMet()Returns: [Boolean](http://api.jquery.com/Types/#Boolean) 确定[`delay`](#option-delay)选项是否满足当前的互动(interaction)。 * 这个方法不接受任何参数。 **Code examples:** 调用 _mouseDelayMet 方法: ``` $( ".selector" ).mouse( "_mouseDelayMet" ); ``` ### _mouseDestroy() 破坏互动(interaction)的事件处理程序。这个必须调用从widget的`_destroy()`方法。 Destroys the interaction event handlers. This must be called from the extending widget's `_destroy()` method. * 这个方法不接受任何参数。 **Code examples:** 调用 _mouseDestroy 方法: ``` $( ".selector" ).mouse( "_mouseDestroy" ); ``` ### _mouseDistanceMet()Returns: [Boolean](http://api.jquery.com/Types/#Boolean) 确认[`distance`](#option-distance)选项是否已满足当前的互动(interaction) * 这个方法不接受任何参数。 **Code examples:** 调用 _mouseDistanceMet 方法: ``` $( ".selector" ).mouse( "_mouseDistanceMet" ); ``` ### _mouseDown() 互动(interaction)开始处理。验证该事件原先相关的鼠标按钮键 并确保[`delay`](#option-delay)和[`distance`](#option-distance)选项符合之前激活的互动(interaction)。当互动(interaction)准备开始时,调用 [`_mouseStart()`](#method-_mouseStart) 方法来处理扩展部件。 * 这个方法不接受任何参数。 **Code examples:** 调用 _mouseDown 方法: ``` $( ".selector" ).mouse( "_mouseDown" ); ``` ### _mouseDrag() 扩展部件需要执行一个 `_mouseDrag()`方法来处理互动(interaction)的每次移动。此方法将接收鼠标移动相关事件。 * 这个方法不接受任何参数。 **Code examples:** 调用 _mouseDrag 方法: ``` $( ".selector" ).mouse( "_mouseDrag" ); ``` ### _mouseInit() 初始化的互动(interaction)事件处理程序。这必须调用扩展部件的`_create()` 方法。 * 这个方法不接受任何参数。 **Code examples:** 调用 _mouseInit 方法: ``` $( ".selector" ).mouse( "_mouseInit" ); ``` ### _mouseMove() 处理互动(interaction)的每次移动。为扩展部件处理器调用[`mouseDrag()`](#method-_mouseDrag)方法。 * 这个方法不接受任何参数。 **Code examples:** 调用 _mouseMove 方法: ``` $( ".selector" ).mouse( "_mouseMove" ); ``` ### _mouseStart() 扩展部件需要执行一个 `_mouseStart()`方法来处理互动(interaction)的开始激活。此方法将接收互动(interaction)开始激活的相关鼠标事件。 * 这个方法不接受任何参数。 **Code examples:** 调用 _mouseStart 方法: ``` $( ".selector" ).mouse( "_mouseStart" ); ``` ### _mouseStop() 扩展部件需要执行一个 `_mouseStop()`方法来处理互动(interaction)的结束。此方法将接收互动(interaction)结束的相关鼠标事件。 * 这个方法不接受任何参数。 **Code examples:** 调用 _mouseStop 方法: ``` $( ".selector" ).mouse( "_mouseStop" ); ``` ### _mouseUp() 互动(interaction)结束的处理程序。调用 [`mouseStop()`](#method-_mouseStop) 方法来处理扩展部件。 * 这个方法不接受任何参数。 **Code examples:** 调用 _mouseUp 方法: ``` $( ".selector" ).mouse( "_mouseUp" ); ```