Latest web development tutorials

jQuery를 UI API - 마우스 상호 작용 (마우스 상호 작용)

범주

인터랙티브 (상호 작용) | 유틸리티 (유틸리티)

용법

설명 : 기본 상호 작용 층.

의존 :

참고 : 함께 jQuery.Widget 유사한 목적 직접 상호 작용하는 마우스를 사용하지 마십시오. 이것은 다른 위젯에 대한 순수한베이스 레이어를 사용 상속입니다. 이 페이지에 추가 한 jQuery.Widget 문서,하지만 내부 방법이 적용되지 않을 수 있습니다 포함되어 있습니다. 공개 API는 _mouseStart() , _mouseDrag() , _mouseStop() 및 _mouseCapture() .

빠른 탐색

选项 方法 事件

选项 类型 描述 默认值
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 选项是否满足当前交互。
  • 该方法不接受任何参数。

代码实例：

调用 _mouseDelayMet 方法：

$( ".selector" ).mouse( "_mouseDelayMet" );
_mouseDestroy() jQuery (plugin only) 销毁交互事件处理程序。这必须调用来自扩展的小部件的 _destroy() 方法。
  • 该方法不接受任何参数。

代码实例：

调用 _mouseDestroy 方法：

$( ".selector" ).mouse( "_mouseDestroy" );
_mouseDistanceMet() Boolean 决定 distance 选项是否满足当前交互。
  • 该方法不接受任何参数。

代码实例：

调用 _mouseDistanceMet 方法：

$( ".selector" ).mouse( "_mouseDistanceMet" );
_mouseDown() jQuery (plugin only) 处理交互的开始。确认与主要的鼠标按钮关联的事件，确保 delay 与 distance 在交互启动之前得到满足。当交互已经准备开始，为要处理的扩展小部件调用 _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 方法。
  • 该方法不接受任何参数。

代码实例：

调用 _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 方法。
  • 该方法不接受任何参数。

代码实例：

调用 _mouseUp 方法：

$( ".selector" ).mouse( "_mouseUp" );