ホーム>Web デザインのチュートリアル>HTMLチュートリアル

モバイル端末に簡易プログレスバーを実装するHTML5タッチイベントの実装方法

著者：Eve Cole 更新時間：2025-03-20 15:00:04
序文

多くの新しいイベントが HTML に追加されましたが、互換性の問題により、多くのイベントは広く使用されていません。次に、いくつかの便利なモバイル タッチ イベント、touchstart、touchmove、touchend を紹介します。

導入

これらのイベントを簡単に紹介しましょう。

  1. touchstart: すでに画面上に指がある場合でも、指が画面に触れるとトリガーされます。
  2. touchmove: 指が画面上をスライドすると継続的にトリガーされます。このイベント中に、preventDefault() イベントを呼び出すと、スクロールを防ぐことができます。
  3. touchend: 指が画面から離れるとトリガーされます。

これらのタッチ イベントには共通の dom プロパティがあります。さらに、タッチを追跡するための 3 つのプロパティが含まれています。

  1. Touchs: 現在追跡されているタッチ操作を表すタッチ オブジェクトの配列。
  2. targetTouches: イベント ターゲットに固有の Touch オブジェクトの配列。
  3. changeTouches: 最後のタッチ以降に何が変更されたかを表す Touch オブジェクトの配列。

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

  1. clientX: ビューポート内のタッチ ターゲットの x 座標。
  2. clientY: ビューポート内のタッチ ターゲットの y 座標。
  3. pageX: ページ内のタッチ ターゲットの x 座標。
  4. pageY: ページ内のタッチターゲットのy座標。
  5. screenX: screenX: 画面内のタッチ ターゲットの x 座標。
  6. screenY: screenX: 画面内のタッチターゲットのx座標。
  7. identifier: タッチを識別する一意の ID。
  8. target: screenX: 画面内のタッチ ターゲットの x 座標。

タッチイベントの特徴を理解したところで、楽しい実践セッションを始めましょう。

実戦

タッチ イベントを使用して、モバイル側にスライド式プログレス バーを実装してみましょう。

まずはHTMLをレイアウトしましょう

<div class=progress-wrapper> <div class=progress></div> <div class=progress-btn>​​</div></div>

CSS部分はここでは省略しています

dom要素を取得し、タッチ開始点とボタンとコンテナの左端との距離を初期化します。

 const progressWrapper = document.querySelector('.progress-wrapper')const progress = document.querySelector('.progress')const progressBtn = document.querySelector('.progress-btn')const progressWrapperWidth = progressWrapper.offsetWidthlet touchPoint = 0let btnLeft = 0

タッチスタートイベントをリッスンする

progressBtn.addEventListener('touchstart', e => { let touch = e.touches[0] touchPoint = touch.clientX // タッチの初期位置を取得 btnLeft = parseInt(getComputedStyle(progressBtn, null)['left'] , 10 ) // ここでは IE ブラウザの互換性を無視します})

touchmove イベントをリッスンする

progressBtn.addEventListener('touchmove', e => {e.preventDefault() let touch = e.touches[0] let diffX = touch.clientX - touchPoint // 現在位置と初期位置の差から変更された距離を計算しますPosition let btnLeftStyle = btnLeft + diffX // ボタンの新しい左の値を定義します touch.target.style.left = btnLeftStyle + 'px' progress.style.width = (btnLeftStyle / progressWrapperWidth) * 100 + '%' // ボタンの左の値とプログレス バー コンテナの長さの比率からプログレス バーの長さのパーセンテージを計算します})

一連の論理操作により、プログレスバーは基本的に実装されましたが、タッチ位置がプログレスバーのコンテナを超えると、いくつかの制限が発生することがわかりました。

 if (btnLeftStyle > progressWrapperWidth) { btnLeftStyle = progressWrapperWidth } else if (btnLeftStyle < 0) { btnLeftStyle = 0}

この時点で、シンプルなモバイル スクロール バーが実装されました。

以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。

関連記事