ons.GestureDetector

ジェスチャを検知するためのユーティリティクラスです。

プロパティ概要

名前 概要
defaults

default settings. more settings are defined per gesture at /gestures. Each gesture can be disabled/enabled by setting it’s name (like swipe) to false. You can set the defaults for all instances by changing this object before creating an instance.

DOCUMENT GestureDetector document where the base events are added at
HAS_POINTEREVENTS detect support for pointer events
HAS_TOUCHEVENTS detect support for touch events
IS_MOBILE detect mobile browsers
NO_MOUSEEVENTS detect if we want to support mouseevents at all
CALCULATE_INTERVAL interval in which GestureDetector recalculates current velocity/direction/angle in ms
EVENT_TYPES

eventtypes per touchevent (start, move, end) are filled by Event.determineEventTypes on setup the object contains the DOM event names per type (EVENT_START, EVENT_MOVE, EVENT_END)

DIRECTION_DOWN|LEFT|UP|RIGHT direction strings, for safe comparisons
POINTER_MOUSE|TOUCH|PEN pointertype strings, for safe comparisons
EVENT_START|MOVE|END|RELEASE|TOUCH eventtypes
READY if the window events are set…
plugins plugins namespace
gestures

gestures namespace see /gestures for the definitions

prevent_mouseevents

when touch events have been fired, this is true this is used to stop mouse events

started if EVENT_START has been fired
should_detect when the mouse is hold down, this is true
pointers holds all pointers, by identifier
element (翻訳中)
enabled (翻訳中)
options

options, merged with the defaults options with an _ are converted to camelCase

eventStartHandler event start handler on the element to start the detection
eventHandlers keep a list of user event handlers which needs to be removed when calling ‘dispose’
dragMinDistance minimal movement that have to be made before the drag event gets triggered
dragDistanceCorrection

Set dragDistanceCorrection to true to make the starting point of the drag be calculated from where the drag was triggered, not from where the touch started. Useful to avoid a jerk-starting drag, which can make fine-adjustments through dragging difficult, and be visually unappealing.

dragMaxTouches set 0 for unlimited, but this can conflict with transform
dragBlockHorizontal

prevent default browser behavior when dragging occurs be careful with it, it makes the element a blocking element when you are using the drag gesture, it is a good practice to set this true

dragBlockVertical same as dragBlockHorizontal, but for vertical movement
dragLockToAxis

dragLockToAxis keeps the drag gesture on the axis that it started on, It disallows vertical directions if the initial direction was horizontal, and vice versa.

dragLockMinDistance

drag lock only kicks in when distance > dragLockMinDistance This way, locking occurs only when the distance has become large enough to reliably determine the direction

holdTimeout (翻訳中)
holdThreshold movement allowed while holding
swipeMinTouches (翻訳中)
swipeMaxTouches (翻訳中)
swipeVelocityX horizontal swipe velocity
swipeVelocityY vertical swipe velocity
tapMaxTime max time of a tap, this is for the slow tappers
tapMaxDistance max distance of movement of a tap, this is for the slow tappers
tapAlways always trigger the tap event, even while double-tapping
doubleTapDistance max distance between two taps
doubleTapInterval max time between two taps
preventDefault

call preventDefault at touchstart, and makes the element blocking by disabling the scrolling of the page, but it improves gestures like transforming and dragging. be careful with using this, it can be very annoying for users to be stuck on the page

preventMouse disable mouse events, so only touch (or pen!) input triggers events
transformMinScale minimal scale factor, no scale is 1, zoomin is to 0 and zoomout until higher then 1
transformMinRotation rotation in degrees

メソッド

シグネチャ 概要
constructor(element[, options]) GestureDetectorのインスタンスを生成します。
on(gestures, handler) ジェスチャに対するイベントハンドラを追加します。指定できるジェスチャ名は、drag dragleft dragright dragup dragdown hold release swipe swipeleft swiperight swipeup swipedown tap doubletap touch transform pinch pinchin pinchout rotate です。
off(gestures, handler) イベントリスナーを削除します。
trigger(gesture, eventData) trigger gesture event
enable(state) ジェスチャ検知を有効化/無効化します。
dispose() このインスタンスでのジェスチャの検知や、イベントハンドラを全て解除して廃棄します。
constructor(element[, options]): ons.GestureDetector.Instance

GestureDetectorのインスタンスを生成します。

パラメーター
名前 概要
element Element ジェスチャを検知するDOM要素を指定します。
options Object オプションを指定します。
on(gestures, handler)

ジェスチャに対するイベントハンドラを追加します。指定できるジェスチャ名は、drag dragleft dragright dragup dragdown hold release swipe swipeleft swiperight swipeup swipedown tap doubletap touch transform pinch pinchin pinchout rotate です。

パラメーター
名前 概要
gestures String 検知するジェスチャ名を指定します。スペースで複数指定することができます。
handler Function イベントハンドラとなる関数オブジェクトを指定します。
off(gestures, handler)

イベントリスナーを削除します。

パラメーター
名前 概要
gestures String ジェスチャ名を指定します。スペースで複数指定することができます。
handler Function イベントハンドラとなる関数オブジェクトを指定します。
trigger(gesture, eventData)

trigger gesture event

パラメーター
名前 概要
gesture String (翻訳中)
eventData Object (翻訳中)
enable(state)

ジェスチャ検知を有効化/無効化します。

パラメーター
名前 概要
state Boolean 有効にするかどうかを指定します。
dispose()

このインスタンスでのジェスチャの検知や、イベントハンドラを全て解除して廃棄します。

イベント

名前 概要
drag (翻訳中)
dragstart (翻訳中)
dragend (翻訳中)
drapleft (翻訳中)
dragright (翻訳中)
dragup (翻訳中)
dragdown (翻訳中)
gesture (翻訳中)
hold (翻訳中)
release (翻訳中)
swipe (翻訳中)
swipeleft (翻訳中)
swiperight (翻訳中)
swipeup (翻訳中)
swipedown (翻訳中)
tap (翻訳中)
doubletap (翻訳中)
touch (翻訳中)
transform (翻訳中)
transformstart (翻訳中)
transformend (翻訳中)
pinchin (翻訳中)
pinchout (翻訳中)
rotate (翻訳中)
drag

(翻訳中)

パラメーター
名前 概要
ev Object (翻訳中)
dragstart

(翻訳中)

パラメーター
名前 概要
ev Object (翻訳中)
dragend

(翻訳中)

パラメーター
名前 概要
ev Object (翻訳中)
drapleft

(翻訳中)

パラメーター
名前 概要
ev Object (翻訳中)
dragright

(翻訳中)

パラメーター
名前 概要
ev Object (翻訳中)
dragup

(翻訳中)

パラメーター
名前 概要
ev Object (翻訳中)
dragdown

(翻訳中)

パラメーター
名前 概要
ev Object (翻訳中)
gesture

(翻訳中)

パラメーター
名前 概要
ev Object (翻訳中)
hold

(翻訳中)

パラメーター
名前 概要
ev Object (翻訳中)
release

(翻訳中)

パラメーター
名前 概要
ev Object (翻訳中)
swipe

(翻訳中)

パラメーター
名前 概要
ev Object (翻訳中)
swipeleft

(翻訳中)

パラメーター
名前 概要
ev Object (翻訳中)
swiperight

(翻訳中)

パラメーター
名前 概要
ev Object (翻訳中)
swipeup

(翻訳中)

パラメーター
名前 概要
ev Object (翻訳中)
swipedown

(翻訳中)

パラメーター
名前 概要
ev Object (翻訳中)
tap

(翻訳中)

パラメーター
名前 概要
ev Object (翻訳中)
doubletap

(翻訳中)

パラメーター
名前 概要
ev Object (翻訳中)
touch

(翻訳中)

パラメーター
名前 概要
ev Object (翻訳中)
transform

(翻訳中)

パラメーター
名前 概要
ev Object (翻訳中)
transformstart

(翻訳中)

パラメーター
名前 概要
ev Object (翻訳中)
transformend

(翻訳中)

パラメーター
名前 概要
ev Object (翻訳中)
pinchin

(翻訳中)

パラメーター
名前 概要
ev Object (翻訳中)
pinchout

(翻訳中)

パラメーター
名前 概要
ev Object (翻訳中)
rotate

(翻訳中)

パラメーター
名前 概要
ev Object (翻訳中)

議論

お困りですか?

Onsen UIに関する質問は、Stack Overflowにてonsen-uiタグを付与してください。Onsen UIチームはあなたの問題解決をお手伝いします。

バグ報告や機能要望については、GitHub Issuesに記載をお願いいたします。

あわせて、下記の情報も参考にしてください。