# Mouse Interaction # 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" ); ```