ネイティブ JS を使用してタッチスライド監視イベントを実装する方法

序文

今日はちょっとしたデモを書きました。左右にスワイプするロジックに関わる部分があります。当初はプラグインを使いたかったのですが、長い間ネイティブ JS を使ってスライディングモニタリングを書いていなかったことを思い出し、ネイティブ JS で実装してみました。結局、古いものを復習することで新しいことを学ぶことができ、同時に記録を残すこともできます。まず達成した効果を投稿します:

概念

スムーズなタッチスライドイベントリスナーを作成するには、次の 3 つのロジックの側面を考慮する必要があります。

距離: スライド距離は40以上である必要があります
時間: スライド時間は 0.5 秒未満、つまり、指を押してドラッグし、500 ミリ秒以内に離します (画面に触れるだけでトリガーされないようにする)
スライド方向:
- 左右にスライドする条件は、X 軸の移動距離が Y 軸の移動距離より大きいことです。正の場合は左に移動し、負の場合は右に移動します。
- 上下にスライドする条件は、Y軸の移動距離がX軸の移動距離より大きいことです。正であれば上に移動し、負であれば下に移動します。

基本的な考え方があれば、この考え方に従ってコードを完成させることができます〜

リスニングイベント

タッチスライドを監視する場合、次の 3 つのタッチイベントが自然に使用されます。

1. タッチスタート指で画面をクリックしたときにトリガーされるタッチスタート（マルチタッチを監視でき、次の指もトリガーされます）

2. タッチムーブスライドすると接触点が変化し、継続的にトリガーされます

3. touchend 指が画面から離れるとタッチが終了します

これら 3 つのタッチイベントにはそれぞれ 3 つのタッチオブジェクトリストが含まれます (タッチポイントに基づいてマルチタッチを実装できます)。

1. タッチ: 現在の画面上のすべての指のタッチポイントのリスト

2. targetTouches: 現在のDOM要素上の指のリスト

3. changedTouches: 現在のイベントの指のリスト

同時に、各タッチオブジェクト Touch には次のプロパティが含まれます。

- 識別子: タッチを識別する一意のID

- pageX: ページ上のタッチポイントのX座標

- pageY: ページ上のタッチポイントのy座標

- screenX: 画面上のタッチポイントのX座標

- screenY: 画面上のタッチポイントのy座標

- clientX: ビューポート内のタッチポイントのX座標

- clientY: ビューポート内のタッチポイントのy座標

- ターゲット: タッチされたDOMノード

コードの実装

上記のアイデアとタッチイベントの基礎があれば、簡単にコードを書くことができます〜

let box = document.querySelector('body') // リスナー オブジェクト let startTime = '' // タッチ開始時間 let startDistanceX = '' // タッチ開始 X 軸位置 let startDistanceY = '' // タッチ開始 Y 軸位置 let endTime = '' // タッチ終了時間 let endDistanceX = '' // タッチ終了 X 軸位置 let endDistanceY = '' // タッチ終了 Y 軸位置 let moveTime = '' // タッチ時間 let moveDistanceX = '' // タッチ移動 X 軸距離 let moveDistanceY = '' // タッチ移動 Y 軸距離 box.addEventListener("touchstart", (e) => {
    startTime = 新しいDate().getTime()
    開始距離X = e.touches[0].screenX
    開始距離Y = e.touches[0].screenY
})
box.addEventListener("touchend", (e) => {
    endTime = 新しいDate().getTime()
    終了距離X = e.changedTouches[0].screenX
    終了距離Y = e.changedTouches[0].screenY
    移動時間 = 終了時間 - 開始時間
    移動距離X = 開始距離X - 終了距離X
    移動距離Y = 開始距離Y - 終了距離Y
    console.log(移動距離X、移動距離Y)
    // スライド距離が 40 を超え、時間が 500 ミリ秒未満かどうかを判断します if ((Math.abs(moveDistanceX) > 40 || Math.abs(moveDistanceY) > 40) && moveTime < 500) {
        // X軸上の移動距離がY軸上の移動距離より大きいかどうかを判定します。if (Math.abs(moveDistanceX) > Math.abs(moveDistanceY)) {
        // 左と右 console.log(moveDistanceX > 0 ? 'left' : 'right')
        } それ以外 {
        // 上下 console.log(moveDistanceY > 0 ? 'up' : 'down')
        }
    }
})

実行して確認してみましょう:

タッチ時間は 500 ミリ秒を超えるとトリガーされず、スライド距離は 40 未満の場合はトリガーされないことがわかります。角度付きスライドの場合は、XY 軸上の最長移動距離が優先されます。完璧に達成しました!

追記

フロントエンドフレームワークは急速に発展しており、多くの人はフレームワークを直接学習するプレッシャーがないため、ネイティブ JS の学習にあまり注意を払っていません。しかし、物事がどのように変化しても、本質は変わりません。フレームワークの利点は、その設計アイデアとパターンにあります。深く理解したいのであれば、やはりネイティブ JS を基礎として持つ必要があります。さらに先へ進みたいのであれば、やはりしっかりとした基礎を築く必要があります。結局のところ、高い建物は地面から始まりますよね?

ネイティブ JS を使用してタッチスライド監視イベントを実装する方法についての記事はこれで終わりです。より関連性の高い JS タッチスライド監視イベントコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: