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