touchmove ( ontouchmove )イベント
touchmove ( ontouchmove )イベントは、タッチベースのデバイス上で指を動かすことで発生するイベントです。
指を動かしている間は常に touchmove イベントが発生します。指を離すと touchmove イベントは終わり、touchend イベントが発生します。
＊Safari、Opera ブラウザでは対応していないかもしれません。
document.getElementById("contena").addEventListener("touchmove", (event)=>{
console.log( event );
});
詳しくは Example を参照してください
このイベントは pointermove イベントで代替えできます。
ページ内 Index
座標の取得
座標の取得には以下の４つの方法があります。
| 座標の基準 | プロパティ名 |
|---|---|
| スクリーンデバイスの左上端 | event.screenX、event.screenY |
| ブラウザの表示エリアの左上端 | event.clientX、event.clientY |
| ドキュメントの左上端 | event.pageX、event.pageY |
| エレメントの左上端 | event.offsetX、event.offsetY |
pointerenter (onpointerenter )イベントは、ポインターイベントの１つです。ポインターイベントは、マウス、タッチスクリーン、ペンといったポインターに関する入力デバイスのためのイベントです。
構文（Syntax）
in HTML
<tagelement ontouchmove="function()">
in JavaScript
object.ontouchmove = function(){ };
object.addEventListener("touchmove", script_);
備考（Remarks）
| Bubbles | Yes |
| Cancelable | Yes |
| Interface | TouchEvent |
| Supported HTML Elements | ALL HTML elements |
Example
touchmove ( ontouchmove )イベントの例です。以下の「確認」ボタンをクリックしてください。
この例は、タッチデバイスで操作することが前提です。
「Example Element」を、タッチデバイスでタッチ（押下）している間は touchmove が発生します。
「Child Element」はタッチ（押下）すると Event.stopPropagation() メソッドによって touchmove イベントのバブリングがキャンセルされます。？
タッチデバイスに関連するイベント
タッチイベントには下記のイベントがあります。
| touchstart | タッチデバイスでエレメントに触れる |
| touchend | エレメントから指が離れる |
| touchmove | 画面上で指を動かす |
| touchcancel | タッチイベントが中断する |