JavaScriptでタッチイベントを操作するための基本をご覧ください
詳細はこちらJavaScriptイベント
タッチイベントは、スマートフォンやタブレットなどのモバイルデバイスでページを表示したときにトリガーされるイベントです。
マルチタッチイベントを追跡できます。
4つのタッチイベントがあります。
touchstart
タッチイベントが開始されました(表面がタッチされます)touchend
タッチイベントが終了しました(表面はもう触れられていません)touchmove
指(またはデバイスに触れているもの)が表面上を移動しますtouchcancel
タッチイベントはキャンセルされました
タッチイベントが発生するたびに、タッチイベント:
const link = document.getElementById('my-link')
link.addEventListener('touchstart', event => {
// touch event started
})
そのイベントでアクセスできるすべてのプロパティは次のとおりです
identifier
この特定のイベントの一意の識別子。マルチタッチイベントを追跡するために使用されます。同じ指=同じ識別子。clientX
/clientY
スクロールに関係なく、ブラウザウィンドウを基準にしたマウスポインタのx座標とy座標screenX
/screenY
画面座標でのマウスポインタのx座標とy座標pageX
/pageY
ページ座標(スクロールを含む)でのマウスポインタのx座標とy座標target
触れた要素
私の無料ダウンロードJavaScriptビギナーズハンドブック
その他のブラウザチュートリアル:
- HTML5で利用できるいくつかの便利なトリック
- CMSベースのWebサイトをオフラインで機能させる方法
- プログレッシブウェブアプリの完全ガイド
- Fetch API
- プッシュAPIガイド
- チャネルメッセージングAPI
- サービスワーカーのチュートリアル
- キャッシュAPIガイド
- 通知APIガイド
- IndexedDBに飛び込む
- セレクターAPI:querySelectorおよびquerySelectorAll
- 延期と非同期でJavaScriptを効率的にロードする
- ドキュメントオブジェクトモデル(DOM)
- Web Storage API:ローカルストレージとセッションストレージ
- HTTPCookieのしくみを学ぶ
- 履歴API
- WebP画像形式
- XMLHttpRequest(XHR)
- 詳細なSVGチュートリアル
- データURLとは
- Webプラットフォームを学ぶためのロードマップ
- CORS、クロスオリジンリソースシェアリング
- Webワーカー
- requestAnimationFrame()ガイド
- Doctypeとは何ですか
- DevToolsコンソールとコンソールAPIの操作
- 音声合成API
- プレーンJavaScriptでDOMreadyイベントを待つ方法
- DOM要素にクラスを追加する方法
- querySelectorAllからDOM要素をループする方法
- DOM要素からクラスを削除する方法
- DOM要素にクラスがあるかどうかを確認する方法
- DOMノード値を変更する方法
- querySelectorAllから返されたDOM要素のリストにクリックイベントを追加する方法
- WebRTC、リアルタイムWeb API
- JavaScriptで要素のスクロール位置を取得する方法
- DOM要素を置き換える方法
- 入力ファイルフィールドの画像のみを受け入れる方法
- なぜブラウザのプレビューバージョンを使用するのですか?
- Blobオブジェクト
- ファイルオブジェクト
- FileReaderオブジェクト
- FileListオブジェクト
- ArrayBuffer
- ArrayBufferView
- URLオブジェクト
- 型付き配列
- DataViewオブジェクト
- BroadcastChannel API
- Streams API
- FormDataオブジェクト
- ナビゲーターオブジェクト
- GeolocationAPIの使用方法
- getUserMedia()の使用方法
- ドラッグアンドドロップAPIの使用方法
- Webページのスクロールを操作する方法
- JavaScriptでのフォームの処理
- キーボードイベント
- マウスイベント
- タッチイベント
- DOM要素からすべての子を削除する方法
- バニラJavascriptを使用してHTML属性を作成する方法
- JavaScriptを使用してチェックボックスがチェックされているかどうかを確認するにはどうすればよいですか?
- JavaScriptを使用してクリップボードにコピーする方法
- JavaScriptを使用してボタンを無効にする方法
- ブラウザでページを編集可能にする方法
- URLSearchParamsを使用してJavaScriptでクエリ文字列値を取得する方法
- ページからすべてのCSSを一度に削除する方法
- insertAdjacentHTMLの使用方法
- Safari、終了する前に警告する
- JavaScriptを使用してDOMに画像を追加する方法
- フォームをリセットする方法
- GoogleFontsの使い方