ホームページ > 記事 > ウェブフロントエンド > モバイル端末に簡易プログレスバーを実装するHTML5タッチイベントの実装方法

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

不言オリジナル: 2018-05-05 10:09:062403ブラウズ

この記事では、モバイル端末に簡単なプログレスバーを実装するための HTML5 タッチイベントの実装方法を主に紹介します。必要な友達に参考にしてください。 HTML では、多くの新しいイベントが追加されましたが、互換性の問題により、多くのイベントは広く使用されていません。次に、いくつかの便利なモバイルタッチイベント、touchstart、touchmove、touchend を紹介します。

はじめに

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

touchstart: すでに画面上に指がある場合でも、指が画面に触れるとトリガーされます。

touchmove: 指が画面上をスライドすると継続的にトリガーされます。このイベント中に、preventDefault() イベントを呼び出すと、スクロールを防ぐことができます。

touchend: 指が画面から離れるとトリガーされます。
これらのタッチイベントには共通の dom 属性があります。さらに、タッチを追跡するための 3 つのプロパティも含まれています:
touches: 現在追跡されているタッチ操作を表すタッチオブジェクトの配列。

targetTouches: イベントターゲットに固有の Touch オブジェクトの配列。

changeTouches: 最後のタッチ以降に何が変更されたかを示す Touch オブジェクトの配列。
各タッチオブジェクトに含まれるプロパティは次のとおりです:
clientX: ビューポート内のタッチターゲットの x 座標。

clientY: ビューポート内のタッチターゲットの y 座標。

pageX: ページ内のタッチターゲットのx座標。
pageY: ページ内のタッチターゲットの Y 座標。
screenX: screenX: 画面内のタッチターゲットのx座標。
screenY: screenX: 画面内のタッチターゲットのx座標。
識別子: タッチを識別する一意の ID。
target:screenX: 画面内のタッチターゲットのx座標。
タッチイベントの特徴を理解したら、エキサイティングな実践フェーズを始めましょう
実践的な戦闘

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

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

<p class="progress-wrapper">
    <p class="progress"></p>
    <p class="progress-btn"></p>
</p>

CSS部分は省略します

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

const progressWrapper = document.querySelector(&#39;.progress-wrapper&#39;)
const progress = document.querySelector(&#39;.progress&#39;)
const progressBtn = document.querySelector(&#39;.progress-btn&#39;)
const progressWrapperWidth = progressWrapper.offsetWidth

let touchPoint = 0
let btnLeft = 0

touchstartイベントを聞く

progressBtn.addEventListener(&#39;touchstart&#39;, e => {
    let touch = e.touches[0]
    touchPoint = touch.clientX // 获取触摸的初始位置
 btnLeft = parseInt(getComputedStyle(progressBtn, null)[&#39;left&#39;], 10) // 此处忽略IE浏览器兼容性
})

touchmoveイベントを聞いてください

progressBtn.addEventListener(&#39;touchmove&#39;, e => {
e.preventDefault()
    let touch = e.touches[0]

    let diffX = touch.clientX - touchPoint // 通过当前位置与初始位置之差计算改变的距离
    let btnLeftStyle = btnLeft + diffX // 为按钮定义新的left值

    touch.target.style.left = btnLeftStyle + &#39;px&#39;

    progress.style.width = (btnLeftStyle / progressWrapperWidth) * 100 + &#39;%&#39; // 通过按钮的left值与进度条容器长度的比值，计算进度条的长度百分比
})

一連の論理演算により、プログレスバーは基本的に実装されましたが、タッチ位置がプログレスバーコンテナを超えると、問題が発見されました。バグが発生します。もう一度やってみましょう。いくつかの制限があります

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

これまでのところ、シンプルなモバイルスクロールバーが実装されています

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

関連記事