webkit における タッチイベント の処理方法の基本です。 MSIE は 独自実装 してくれているのでそちらで対応します･･･
MSIE の タッチイベント については こちら。
イベント の 種類
- touchstart
- タッチイベント が開始された場合に発生します
- touchmove
- タッチしたまま移動した場合に発生します
- touchend
- 画面上からタッチが離れた場合に発生します
- touchcancel
- タッチしている数がデバイスで認識できる上限を超えてタッチされた場合に発生します
イベントオブジェクト
TouchEvent
| プロパティ名 | 型 | 説明 |
|---|---|---|
| altKey | boolean | ALTキーの状態 |
| bubbles | boolean | 現在のイベントをバブルアップするかどうか |
| cancelBubble | boolean | 現在のイベントのバブルアップがキャンセルされたかどうか |
| cancelable | boolean | イベントがキャンセル可能かどうか |
| changedTouches | TouchList |
Touch オブジェクト の配列
|
| charCode | number | 文字キーの Unicode 値 |
| clipboardData | undefined | |
| ctrlKey | boolean | CTRLキーの状態 |
| currentTarget | document | イベントが実行されている DOM要素 |
| defaultPrevented | boolean | |
| detail | number | |
| eventPhase | number | 現在のイベントがイベント処理のうちどの段階か |
| keyCode | number | イベントを引き起こしたキーのUnicode 値 |
| layerX | number | 現在のレイヤー上における相対的な水平座標 |
| layerY | number | 現在のレイヤー上における相対的な垂直座標 |
| metaKey | boolean | METAキーの状態 |
| pageX | number | ページ上における相対的な水平座標 |
| pageY | number | ページ上における相対的な垂直座標 |
| returnValue | boolean | イベントの戻り値 |
| shiftKey | boolean | SHIFTキーの状態 |
| srcElement | DOMElement | イベントが発生した DOM要素 |
| target | DOMElement | イベントが発生した最初の DOM要素 |
| targetTouches | TouchList |
Touch オブジェクト の配列
|
| timeStamp | number | タイムスタンプ |
| touches | TouchList |
Touch オブジェクト の配列
|
| type | string | タッチイベントの種類 |
| view | Window | イベントの生成元の view 要素 |
| which | number | キーボードイベントで押下されたキーの Unicode 値 |
Touch
| プロパティ名 | 型 | 説明 |
|---|---|---|
| clientX | number | 水平座標 |
| clientY | number | 垂直座標 |
| identifier | number | タッチ（指）を識別するID |
| pageX | number | ページ上における水平座標 |
| pageY | number | ページ上における垂直座標 |
| screenX | number | スクリーン上における水平座標 |
| screenY | number | スクリーン上における垂直座標 |
| target | DOMElement | イベントが発生した最初の DOM要素 |
| webkitForce | number | |
| webkitRadiusX | number | |
| webkitRadiusY | number | |
| webkitRotationAngle | number |
- タッチスクリーン操作について
- kudox.jp - 意外と簡単！JavaScriptでタッチイベントを取得しよう
- web帳 - スマートフォン JavaScript タッチ、フリックイベント実装
- Developer's Blog - iPhone/Android/PC 対応。jQuery で書くタッチイベント
- ポインター イベントとジェスチャ イベント
最後に… このブログに興味を持っていただけた方は、 ぜひ 「Facebookページ に いいね！」または 「Twitter の フォロー」 お願いします！！