Polymerは、特別なユーザーインタラクションに向けて独自の「ジェスチャーイベント」をオプションでサポートしています。ジェスチャーイベントは、タッチ及びマウスの両環境で一貫したイベントを発生させるので、仕様のmouse-イベントやtouch-イベントに代えて利用されることが推奨されます。これにより、タッチとマウスの両デバイス間で相互運用性が向上します。例えば、clickに代えてtapを使用することで、クロスプラットフォーム上で信頼性の高いを結果を担保できます。
ジェスチャーイベントの使用
ハイブリッド要素を使用する場合は、デフォルトでジェスチャーイベントがサポートされています。Polymer.Elementをベースにクラススタイルで作成した要素では、Polymer.GestureEventListenersミックスインをインポートすることで、ジェスチャサポートを明示的に追加する必要があります。
<link rel="import" href="polymer/lib/mixins/gesture-event-listeners.html">
<script>
class TestEvent extends Polymer.GestureEventListeners(Polymer.Element) {
...
</script>
ジェスチャーイベントにはいくつか追加の設定が必要なため、単純に一般的なaddEventListenerメソッドを用いてリスナーを追加することはできません。ジェスチャーイベントを監視(liseten)するには、：
- ジェスチャーイベントの一つにアノテーション付イベントリスナーを使用する。
<div on-tap="tapHandler">Tap here!</div>
アノテーション付イベントリスナーを使用した場合、Polymerは自動的にジェスチャーイベントを特別に記録するようになります。
-
Polymer.Gestures.addListener/Polymer.Gestures.removeListenerメソッドを使用する
Polymer.Gestures.addListener(this, 'tap', e => this.tapHandler(e));
このPolymer.Gestures.addListenerメソッドを使用して、ホスト要素にリスナーを追加できます。
ジェスチャーイベントのタイプ
サポートされるジェスチャーイベントのタイプは次のとおりです。各タイプについて簡単な説明とevent.detailから取得できる詳細なプロパティを列挙して紹介します。：
-
down：指/ボタンが下げられた
-
x：イベントのclientX座標 -
y：イベントのclientY座標 -
sourceEvent：downアクションを最初に発生させたDOMイベント
-
-
up：指/ボタンが上げられた
-
x：イベントのclientX座標 -
y：イベントのclientY座標 -
sourceEvent：upアクションを最初に発生させたDOMイベント
-
-
tap：ダウン＆アップが発生した
-
x：イベントのclientX座標 -
y：イベントのclientY座標 -
sourceEvent：tapアクションを最初に発生させたDOMイベント
-
-
track：指/ボタンが下げながら動いた
-
state：トラッキング状態を示す文字列： -
start：トラッキングが最初に検出された時に発生(指/ボタンが押され、事前に設定された距離の閾値を超えて移動した時） -
track：トラッキングの最中に発生 -
end：トラッキングが終了した時に発生 -
x：イベントのclientX座標 -
y：イベントのclientY座標 -
dx：トラックイベントの開始時から水平方向にピクセル単位で生じた変化 -
dy：トラックイベントの開始時から垂直方向にピクセル単位で生じた変化 -
ddx：トラックイベントの終了時からから水平方向にピクセル単位で生じた変化 -
ddy：トラックイベントの終了時からから垂直方向にピクセル単位で生じた変化 -
hover()：現在ホバーされている要素を判断するために呼び出される可能性のあるメソッド
-
例
宣言的イベントリスナーの例
<link rel="import" href="polymer/polymer-element.html">
<link rel="import" href="polymer/lib/mixins/gesture-event-listeners.html">
<dom-module id="drag-me">
<template>
<style>
#dragme {
width: 500px;
height: 500px;
background: gray;
}
</style>
<div id="dragme" on-track="handleTrack">[[message]]</div>
</template>
<script>
class DragMe extends Polymer.GestureEventListeners(Polymer.Element) {
static get is() {return 'drag-me'}
handleTrack(e) {
switch(e.detail.state) {
case 'start':
this.message = 'Tracking started!';
break;
case 'track':
this.message = 'Tracking in progress... ' +
e.detail.x + ', ' + e.detail.y;
break;
case 'end':
this.message = 'Tracking ended!';
break;
}
}
}
customElements.define(DragMe.is, DragMe);
</script>
</dom-module>
命令的なイベントリスナーの例
以下の例では、ホスト要素に対してリスナーを追加するのにPolymer.Gestures.addListenerを使用しています。このようなケースでは、アノテーション付イベントリスナーで設定することができません。もし、リスナーがホスト要素またはシャドーDOMの子に対して設定されている場合には、通常、一度追加したイベントリスナーに関してその削除について心配する必要はありません。
動的に追加された子にイベントリスナーを設定する場合には、子を削除する時点で、Polymer.Gestures.addListenerによって設定されたイベントリスナーを削除する必要があるかもしれません。これは、子要素がガベージコレクトされるようにするためです。
<link rel="import" href="polymer/polymer-element.html">
<link rel="import" href="polymer/lib/mixins/gesture-event-listeners.html">
<dom-module id="tap-me">
<template>
<style>
:host {
width: 200px;
height: 200px;
border: 1px solid blue;
}
</style>
<div>Tap me!</div>
<div>I've been tapped [[count]] times.</div>
</template>
<script>
class TapMe extends Polymer.GestureEventListeners(Polymer.Element) {
static get is() {return 'tap-me'}
constructor() {
super();
this.count = 0;
Polymer.Gestures.addListener(this, 'tap', e => this.handleTap(e));
}
handleTap(e) {
this.count++;
}
}
customElements.define(TapMe.is, TapMe);
</script>
</dom-module>
ジェスチャーとスクロールの方向
特定のジェスチャーを監視(listen)した場合には、タッチ入力に関してスクロール方向が制御されます。例えば、trackイベントのリスナーを持つノードは、デフォルトでスクロールが禁止されます。要素は、this.setScrollDirection(direction, node)でスクロール方向を上書きすることができます。
引数directionにはx、y、none、allのいずれかになり、引数nodeはデフォルトでthisになります。