# 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" );
```
- 索引
- Effects
- .addClass()
- Blind Effect
- Bounce Effect
- Clip Effect
- Color Animation
- Drop Effect
- Easings
- .effect()
- Explode Effect
- Fade Effect
- Fold Effect
- .hide()
- Highlight Effect
- Puff Effect
- Pulsate Effect
- .removeClass()
- Scale Effect
- Shake Effect
- .show()
- Size Effect
- Slide Effect
- .switchClass()
- .toggle()
- .toggleClass()
- Transfer Effect
- Effect Core
- .addClass()
- Color Animation
- .effect()
- .hide()
- .removeClass()
- .show()
- .switchClass()
- .toggle()
- .toggleClass()
- Interactions
- Draggable Widget
- Droppable Widget
- Mouse Interaction
- Resizable Widget
- Resizable Widget
- Selectable Widget
- Sortable Widget
- Method Overrides
- .addClass()
- .focus()
- .hide()
- .position()
- .removeClass()
- .show()
- .toggle()
- .toggleClass()
- Methods
- .disableSelection()
- .effect()
- .enableSelection()
- .focus()
- .hide()
- .position()
- .removeUniqueId()
- .scrollParent()
- .show()
- .toggle()
- .uniqueId()
- .zIndex()
- Selectors
- :data() Selector
- :focusable Selector
- :tabbable Selector
- Theming
- CSS 框架(CSS Framework)
- Icons
- Stacking Elements
- UI Core
- :data() Selector
- .disableSelection()
- .enableSelection()
- .focus()
- :focusable Selector
- .removeUniqueId()
- .scrollParent()
- :tabbable Selector
- .uniqueId()
- .zIndex()
- Utilities
- Easings
- Widget Factory
- Widget Plugin Bridge
- Mouse Interaction
- .position()
- Widgets
- Accordion Widget
- Autocomplete Widget
- Button Widget
- Datepicker Widget
- Dialog Widget
- Menu Widget
- Progressbar Widget
- Slider Widget
- Spinner Widget
- Tabs Widget
- Tooltip Widget