備忘録的プログラミングリファレンス

touchmove ( ontouchmove )イベント

 touchmove ( ontouchmove )イベントは、タッチベースのデバイス上で指を動かすことで発生するイベントです。

 指を動かしている間は常に touchmove イベントがトリガーされます。指を離すと touchmove イベントは終わり、touchend イベントが発生します。

 * Safari、Opera ブラウザでは対応していないかもしれません。

 このイベントは pointermove イベントで代替えできます。

pointercancel イベントを追加( onpointercancel イベントハンドラーとして追加)
document.getElementById('example').ontouchmove = (event)=>{
	console.log( 'event type : ' + event.type );
});
詳しくは Example を参照してください

ページ内 Index

座標の取得

 座標の取得には以下の4つの方法があります。

座標の基準プロパティ名
スクリーンデバイスの左上端event.screenX、event.screenY
ブラウザの表示エリアの左上端event.clientX、event.clientY
ドキュメントの左上端event.pageX、event.pageY
エレメントの左上端event.offsetX、event.offsetY

 pointerenter (onpointerenter )イベントは、ポインターイベントの1つです。ポインターイベントは、マウス、タッチスクリーン、ペンといったポインターに関する入力デバイスのためのイベントです。

構文(Syntax)

in HTML

<tagelement ontouchmove="function()">

in JavaScript

object.ontouchmove = function(){ };

object.addEventListener("touchmove", script_);

備考(Remarks)

BubblesYes
CancelableYes
InterfaceTouchEvent
Supported HTML ElementsALL HTML elements

Example

 touchmove ( ontouchmove )イベントの例です。以下の「確認」ボタンをクリックしてください。
 この例は、タッチデバイスで操作することが前提です。

 「Example Element」を、タッチデバイスでタッチ(押下)している間は touchmove が発生します。
 「Child Element」はタッチ(押下)すると Event.stopPropagation() メソッドによって touchmove イベントのバブリングがキャンセルされます。?

確認ボタンをクリックしてください。以下のHTML,CSS,Scriptコード例が実行されます。