スライド方向を決定するhtml5タッチイベントの実装-H5 チュートリアル-php.cn

ホームページ

ウェブフロントエンド

H5 チュートリアル

スライド方向を決定するhtml5タッチイベントの実装

不言

Jun 05, 2018 pm 04:45 PM

この記事は、スライド方向を決定するための html5 タッチイベントの実装に関する関連情報を主に紹介しています。編集者が非常に優れていると考えたので、参考として共有します。

タッチインターフェイスを強力にサポートするために、タッチイベントは、タッチスクリーンまたはタッチパッドでのユーザー操作に応答する機能を提供します。

TouchEvent

TouchEvent は、タッチ表面 (タッチスクリーン、タッチパッドなど) の状態変化イベントにおける指の動きを説明します。このタイプのイベントは 1 つ以上のタッチポイントを記述するために使用され、開発者がタッチポイントの移動、タッチポイントの増減などを検出できるようにします。各 Touch オブジェクトはタッチポイントを表し、各タッチポイントはその位置、サイズ、形状、圧力レベル、およびターゲット要素によって記述されます。 TouchList オブジェクトは、複数のタッチポイントのリストを表します。

タッチイベントの種類

タッチに関連した状態変化を区別するために、複数の種類のタッチイベントが存在します。現在のイベントのタイプは、タッチイベントの TouchEvent.type プロパティを確認することで判断できます。

touchstart: ユーザーがタッチサーフェスにタッチポイントを置いたときに発生します。

touchend: ユーザーによってタッチポイントがタッチ表面から削除されたとき (ユーザーがタッチ表面から指を離したとき) にトリガーされます。
touchmove: ユーザーがタッチ面上でタッチポイントを移動するとトリガーされます。
touchcancel: 何らかの理由で連絡が中断されたときにトリガーされます。

基本原理は、スライド開始(touchStart)とスライド終了(touchEnd)の座標位置を記録し、相対位置を計算することです。

touchStart:function(e){
    startX = e.touches[0].pageX;
    startY = e.touches[0].pageY;
    e = e || window.event;
 },
touchEnd:function(e){
    const that = this;
    endX = e.changedTouches[0].pageX;
    endY = e.changedTouches[0].pageY;
    that.upOrDown(startX,startY,endX,endY);
},
upOrDown:function (startX, startY, endX, endY) {
    const that = this;
    let direction = that.GetSlideDirection(startX, startY, endX, endY);
    switch(direction) {
      case 0:
        console.log("没滑动");
        break;
      case 1:
        console.log("向上");
        break;
      case 2:
        console.log("向下");
        break;
      case 3:
        console.log("向左");
        break;
      case 4:
        console.log("向右");
        break;
      default:
        break;
    }
  },
//根据起点和终点返回方向 1：向上，2：向下，3：向左，4：向右,0：未滑动
  GetSlideDirection:function (startX, startY, endX, endY) {
    const that = this;
    let dy = startY - endY;
    let dx = endX - startX;
    let result = 0;
    //如果滑动距离太短
    if(Math.abs(dx) < 2 && Math.abs(dy) < 2) {
      return result;
    }
    let angle = that.GetSlideAngle(dx, dy);
    if(angle >= -45 && angle < 45) {
      result = 4;
    }else if (angle >= 45 && angle < 135) {
      result = 1;
    }else if (angle >= -135 && angle < -45) {
      result = 2;
    }
    else if ((angle >= 135 && angle <= 180) || (angle >= -180 && angle < -135)) {
      result = 3;
    }
    return result;
  },
  //返回角度
  GetSlideAngle:function (dx, dy) {
    return Math.atan2(dy, dx) * 180 / Math.PI;
  }

ネイティブ JS メソッド

H5 の新しいメソッドに加えて、ネイティブ JS を使用してビューのスライド方向を決定することもできます。コードは次のとおりです (直接実行できます)。 ):chrome Document.body.scrollTop は常に 0 であり、 document.documentElement.scrollTop に変更する必要があることに注意してください

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title> 脚本之家(jb51.net)</title>
  <style>
    p {
      border: 1px solid black;
      width: 200px;
      height: 100px;
      overflow: scroll;
    }
  </style>
</head>
<body style="overflow: scroll">
<h1 id="HEllo-nbsp-word">HEllo word</h1>
<h1 id="HEllo-nbsp-word">HEllo word</h1>
<h1 id="HEllo-nbsp-word">HEllo word</h1>
<h1 id="HEllo-nbsp-word">HEllo word</h1>
<h1 id="HEllo-nbsp-word">HEllo word</h1>
<h1 id="HEllo-nbsp-word">HEllo word</h1>
<h1 id="HEllo-nbsp-word">HEllo word</h1>
<h1 id="HEllo-nbsp-word">HEllo word</h1>
<h1 id="HEllo-nbsp-word">HEllo word</h1>
<h1 id="HEllo-nbsp-word">HEllo word</h1>
<h1 id="HEllo-nbsp-word">HEllo word</h1>
<h1 id="HEllo-nbsp-word">HEllo word</h1>
<h1 id="HEllo-nbsp-word">HEllo word</h1>
<h1 id="HEllo-nbsp-word">HEllo word</h1>
<h1 id="HEllo-nbsp-word">HEllo word</h1>
<h1 id="HEllo-nbsp-word">HEllo word</h1>
<h1 id="HEllo-nbsp-word">HEllo word</h1>
<h1 id="HEllo-nbsp-word">HEllo word</h1>
<h1 id="HEllo-nbsp-word">HEllo word</h1>
<h1 id="HEllo-nbsp-word">HEllo word</h1>
<h1 id="HEllo-nbsp-word">HEllo word</h1>
<h1 id="HEllo-nbsp-word">HEllo word</h1>
<h1 id="HEllo-nbsp-word">HEllo word</h1>
<h1 id="HEllo-nbsp-word">HEllo word</h1>
<h1 id="HEllo-nbsp-word">HEllo word</h1>
<h1 id="HEllo-nbsp-word">HEllo word</h1>
<h1 id="HEllo-nbsp-word">HEllo word</h1>
<h1 id="HEllo-nbsp-word">HEllo word</h1>
<h1 id="HEllo-nbsp-word">HEllo word</h1>
<h1 id="HEllo-nbsp-word">HEllo word</h1>
<h1 id="HEllo-nbsp-word">HEllo word</h1>
<h1 id="HEllo-nbsp-word">HEllo word</h1>
<h1 id="HEllo-nbsp-word">HEllo word</h1>
<h1 id="HEllo-nbsp-word">HEllo word</h1>
<h1 id="HEllo-nbsp-word">HEllo word</h1>
<h1 id="HEllo-nbsp-word">HEllo word</h1>
<h1 id="HEllo-nbsp-word">HEllo word</h1>
<h1 id="HEllo-nbsp-word">HEllo word</h1>
<h1 id="HEllo-nbsp-word">HEllo word</h1>
<h1 id="HEllo-nbsp-word">HEllo word</h1>
<h1 id="HEllo-nbsp-word">HEllo word</h1>
<h1 id="HEllo-nbsp-word">HEllo word</h1>
<h1 id="HEllo-nbsp-word">HEllo word</h1>
<h1 id="HEllo-nbsp-word">HEllo word</h1>
<h1 id="HEllo-nbsp-word">HEllo word</h1>
<h1 id="HEllo-nbsp-word">HEllo word</h1>
<script>
  function scroll( fn ) {
    var beforeScrollTop = document.documentElement.scrollTop,
      fn = fn || function() {};
    console.log(&#39;beforeScrollTop&#39;,beforeScrollTop);
    window.addEventListener("scroll", function() {
      var afterScrollTop = document.documentElement.scrollTop,
        delta = afterScrollTop - beforeScrollTop;
      console.log(&#39;beforeScrollTop&#39;,beforeScrollTop);
      console.log(&#39;afterScrollTop&#39;,afterScrollTop);
      if( delta === 0 ) return false;
      fn( delta > 0 ? "down" : "up" );
      beforeScrollTop = afterScrollTop;
    }, false);
  }

  scroll(function(direction) { console.log(direction) });
</script>

</body>
</html>

関連推奨事項:

での必須ダウンロード属性のダウンロードHTML5 は

HTML5 Canvas を使用してテキストの配置を実現しますメソッドの概要

以上がスライド方向を決定するhtml5タッチイベントの実装の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

H5：HTMLの最新バージョンの探索May 03, 2025 am 12:14 AM

html5isamajorrevision ofhtmlstandardthatedatedatizeizeswebdevelovement byintunwingnewsemanticelementsandcapabilities.1）itenhancesscodereadability and.2）html5EnableSricher、InteractiveEnceEnceEnceEncedienceEnceDirectembe、and.2）

基本を超えて：H5コードの高度な手法May 02, 2025 am 12:03 AM

H5の高度なヒントには以下が含まれます。1。複雑なグラフィックスを使用して描画します。2。ウェブワーカーを使用してパフォーマンスを向上させます。これらのヒントは、開発者がよりダイナミックでインタラクティブで効率的なWebアプリケーションを構築するのに役立ちます。

H5：Webコンテンツとデザインの未来May 01, 2025 am 12:12 AM

H5（HTML5）は、新しい要素とAPIを介してWebコンテンツと設計を改善します。 1）H5はセマンティックタグ付けとマルチメディアサポートを強化します。 2）キャンバスとSVGを導入し、Webデザインを濃縮します。 3）H5は、新しいタグとAPIを介してHTML機能を拡張することにより機能します。 4）基本的な使用には、それを使用したグラフィックの作成が含まれ、高度な使用法にはwebstorageapiが含まれます。 5）開発者は、ブラウザの互換性とパフォーマンスの最適化に注意を払う必要があります。

H5：Web開発の新機能と機能Apr 29, 2025 am 12:07 AM

H5は多くの新しい機能と機能をもたらし、Webページのインタラクティブ性と開発効率を大幅に改善します。 1。SEOの強化などのセマンティックタグ。 2.マルチメディアサポートは、オーディオとビデオの再生とタグを簡素化します。 3. Canvas Drawingは、動的なグラフィックスの描画ツールを提供します。 4.ローカルストレージは、LocalStorageとSessionStorageを介してデータストレージを簡素化します。 5. Geolocation APIは、ロケーションベースのサービスの開発を促進します。

H5：HTML5の重要な改善Apr 28, 2025 am 12:26 AM

HTML5は5つの重要な改善をもたらします。1。セマンティックタグにより、コードの明確性とSEO効果が向上します。 2.マルチメディアサポートは、ビデオとオーディオの埋め込みを簡素化します。 3。フォームエンハンスメントは、検証を簡素化します。 4.オフラインおよびローカルストレージにより、ユーザーエクスペリエンスが向上します。 5。キャンバスとグラフィック機能は、Webページの視覚化を強化します。

HTML5：標準とWeb開発への影響Apr 27, 2025 am 12:12 AM

HTML5のコア機能には、セマンティックタグ、マルチメディアサポート、オフラインストレージ、ローカルストレージ、フォームエンハンスメントが含まれます。 1。コードの読みやすさとSEO効果を改善するためのセマンティックタグなど。 2.ラベルでマルチメディアの埋め込みを簡素化します。 3。アプリケーションキャッシュやLocalStorageなどのオフラインストレージとローカルストレージは、ネットワークのない操作とデータストレージをサポートします。 4.フォームエンハンスメントでは、処理と検証を簡素化するための新しい入力タイプと検証プロパティを導入します。

H5コードの例：実用的なアプリケーションとチュートリアルApr 25, 2025 am 12:10 AM

H5は、さまざまな新機能と機能を提供し、フロントエンド開発の機能を大幅に向上させます。 1.マルチメディアサポート：メディアを埋め込んで要素を埋め込み、プラグインは必要ありません。 2。キャンバス：要素を使用して、2Dグラフィックとアニメーションを動的にレンダリングします。 3。ローカルストレージ：ユーザーエクスペリエンスを改善するために、ローカルストレージとセッションストレージを介して永続的なデータストレージを実装します。

H5とHTML5の接続：類似性と相違点Apr 24, 2025 am 12:01 AM

H5とHTML5は異なる概念です。HTML5は、新しい要素とAPIを含むHTMLのバージョンです。 H5は、HTML5に基づくモバイルアプリケーション開発フレームワークです。 HTML5はブラウザを介してコードを解析およびレンダリングしますが、H5アプリケーションはコンテナを実行し、JavaScriptを介してネイティブコードと対話する必要があります。

See all articles

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

MantisBT

Mantis は、製品の欠陥追跡を支援するために設計された、導入が簡単な Web ベースの欠陥追跡ツールです。 PHP、MySQL、Web サーバーが必要です。デモおよびホスティングサービスをチェックしてください。

WebStorm Mac版

便利なJavaScript開発ツール

SecLists

SecLists は、セキュリティテスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティテスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティテストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジングペイロード、機密データパターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテストマシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。