多くの新しいイベントが HTML に追加されましたが、互換性の問題により、多くのイベントは広く使用されていません。次に、いくつかの便利なモバイル タッチ イベント、touchstart、touchmove、touchend を紹介します。
導入これらのイベントを簡単に紹介しましょう。
これらのタッチ イベントには共通の dom プロパティがあります。さらに、タッチを追跡するための 3 つのプロパティが含まれています。
各タッチ オブジェクトには次のプロパティが含まれます。
タッチイベントの特徴を理解したところで、楽しい実践セッションを始めましょう。
実戦タッチ イベントを使用して、モバイル側にスライド式プログレス バーを実装してみましょう。
まずは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 をご支援いただければ幸いです。