モバイルAngularUI-タッチイベント

Touchとそのイベントを操作するには、次のモジュールを追加する必要があります-

mobile-angular-ui.gestures

タッチモジュールだけに興味がある場合は、mobile-angular-ui.gestures.touchのみを追加できます。

$ touchは、タッチモジュールで利用できるサービスです。使用したいすべての入力デバイスで動作します。動き、持続時間、速度、方向などの詳細を提供します。

$ touchのメソッド

以下は、$ touch −で使用可能なメソッドです。

練る

bindメソッドを見てみましょう。

Syntax

$touch.bind(element, eventHandlers, [options])

Parameters

element −タッチの詳細を処理するhtml要素。

eventHandlers−特定のタッチイベントのハンドラーを持つオブジェクト。使用可能なeventHandlerは次のとおりです。

  • start −これはtouchstartイベントのコールバックです。

  • end −タッチエンドのコールバックイベントです。

  • move −これはtouchmoveイベントのコールバックです。

  • cancel −これはtouchcancelイベントのコールバックです。

options −以下の詳細が可能なオブジェクトです−

  • movementThreshold−整数値。touchmoveハンドラーのトリガーを開始する前の移動のピクセル数。

  • valid −タッチを処理するか無視するかを決定するブール値を返す関数。

  • sensitiveArea−関数、要素、またはBoundingClientRectの場合があります。敏感な領域は、動きが外側にあるときにタッチを解放するための境界を定義します。

  • pointerTypes −これは、デフォルトのポインタイベントマップのサブセットであるキーを持つポインタの配列です。

$ touchで利用可能なタイプ

以下は$ touchで利用可能なタイプです-

プロパティ タイプ 説明
タイプ ストリング これにより、イベントの種類がわかります。例-touchmove、touchstart、touchend、touchcancel
タイムスタンプ 日付 タッチが発生したときのタイムスタンプ
デュレーション int 現在のタッチイベントとタッチスタートの違い
startX 浮く タッチスタートのX座標
startY 浮く タッチスタートのY座標
prevX 浮く 以前に発生したタッチスタートまたはタッチムーブのX座標
前へ 浮く 以前に発生したタッチスタートまたはタッチムーブのY座標
バツ 浮く タッチイベントのX座標
y 浮く タッチイベントのY座標
ステップ 浮く prevX、prevYポイントとx、yポイントの間の距離
stepX 浮く prevXポイントとxポイントの間の距離
stepY 浮く prevYポイントとyポイントの間の距離
速度 浮く 1秒あたりのタッチイベントのピクセル単位の速度
平均速度 浮く 1秒あたりのタッチスタートイベントの平均速度
距離 浮く startX、startYとx、yポイント間の距離
distanceX 浮く startXポイントとxポイントの間の距離
distanceY 浮く startYポイントとyポイントの間の距離
合計 浮く 全体的な動き、つまりデバイス全体で行われる水平方向と垂直方向の動き
totalX 浮く 全体の動き、つまり水平方向。これには、ターンアラウンドと方向転換も含まれます。
合計Y 浮く 全体の動き、つまり垂直方向。これには、ターンアラウンドと方向転換も含まれます。
方向 浮く 左、上、下、右方向のタッチ位置
角度 浮く x軸とy軸からの角度（度単位）

これは、タッチタイプを示す実際の例です。

index.html

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8" />
      <title>Mobile Angular UI Demo</title>
      <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
      <meta name="apple-mobile-web-app-capable" content="yes" />
      <meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimal-ui" />
      <meta name="apple-mobile-web-app-status-bar-style" content="yes" />
      <link rel="shortcut icon" href="/assets/img/favicon.png" type="image/x-icon" />
      <link rel="stylesheet" href="node_modules/mobile-angular-ui/dist/css/mobile-angular-ui-hover.min.css" />
      <link rel="stylesheet" href="node_modules/mobile-angular-ui/dist/css/mobile-angular-ui-base.min.css" />
      <link rel="stylesheet" href="node_modules/mobile-angular-ui/dist/css/mobile-angular-ui-desktop.min.css" />
      <script src="node_modules/angular/angular.min.js"></script>
      <script src="node_modules/angular-route/angular-route.min.js"></script>
      <script src="node_modules/mobile-angular-ui/dist/js/mobile-angular-ui.min.js"></script>
      <script src="node_modules/angular-route/angular-route.min.js"></script>
      <script src="node_modules/mobile-angular-ui/dist/js/mobile-angular-ui.gestures.min.js"></script>
      <link rel="stylesheet" href="src/css/app.css" />
      <script src="src/js/app.js"></script>
      <style>
         a.active {
            color: blue;
         }
      </style>
   </head>

   <body ng-app="myFirstApp" ng-controller="MainController" class="listening">
      
      <!-- Sidebars -->
      <div class="sidebar sidebar-left ">
         <div class="scrollable">
            <h1 class="scrollable-header app-name">Tutorials</h1>
            <div class="scrollable-content">
               <div class="list-group" ui-turn-off='uiSidebarLeft'>
                  <a class="list-group-item" href="/">Home Page </a>
                  <a class="list-group-item" href="#/academic"><i class ="fa fa-caret-right"></i>Academic Tutorials </a>
                  <a class="list-group-item" href="#/bigdata"><i class ="fa fa-caret-right"></i>Big Data & Analytics </a>
                  <a class="list-group-item" href="#/computerProg"><i class="fa fa-caret-right"></i>Computer Programming </a>
                  <a class="list-group-item" href="#/computerscience"><i class="fa fa-caret-right"></i>Computer Science </a>
                  <a class="list-group-item" href="#/databases"><i class="fa fa-caret-right"></i>Databases </a>
                  <a class="list-group-item" href="#/devops"><i class="fa fa-caret-right"></i>DevOps </a>
               </div>
            </div>
         </div>
      </div>
      <div class="sidebar sidebar-right">
         <div class="scrollable">
            <h1 class="scrollable-header app-name">eBooks</h1>
            <div class="scrollable-content">
               <div class="list-group" ui-toggle="uiSidebarRight">
                  <a class="list-group-item" href="#/php"><i class="fa fa-caret-right"></i>PHP </a>
                  <a class="list-group-item" href="#/Javascript"><i class="fa fa-caret-right"></i>Javascript </a>
               </div>
            </div>
         </div>
      </div>
      <div class="app">
         <div class="navbar navbar-app navbar-absolute-top">
            <div class="navbar-brand navbar-brand-center" ui-yield-to="title">
               TutorialsPoint
            </div>
            <div class="btn-group pull-left">
               <div ui-toggle="uiSidebarLeft" class="btn sidebar-left-toggle">
                  <i class="fa fa-th-large "></i> Tutorials
               </div>
            </div>
            <div class="btn-group pull-right" ui-yield-to="navbarAction">
               <div ui-toggle="uiSidebarRight" class="btn sidebar-right-toggle">
                  <i class="fal fa-search"></i> eBooks
               </div>
            </div>
         </div>
         <div class="navbar navbar-app navbar-absolute-bottom">
            <div class="btn-group justified">
               <a ui-turn-on="aboutus_modal" class="btn btn-navbar"><i class="fal fa-globe"></i> About us</a>
               <a ui-turn-on="contactus_overlay" class="btn btn-navbar"><i class="fal fa-map-marker-alt"></i> Contact us</a>
            </div>
         </div>

         <!-- App body -->
         <div class='app-body'>
            <div class='app-content'>
               <ng-view></ng-view>
            </div>
         </div>
      </div><!-- ~ .app -->
      
      <!-- Modals and Overlays -->
      <div ui-yield-to="modals"></div>
   </body>
</html>

有る touchtest $ touch.bindメソッドを利用するディレクティブがapp.jsに追加されました。

directive('touchtest', ['$touch', function($touch) {
   return {
      restrict: 'C',
      link: function($scope, elem) {
         $scope.touch=null;
         $touch.bind(elem, {
            start: function(touch) {
               $scope.containerRect=elem[0].getBoundingClientRect();
               $scope.touch=touch;
               $scope.$apply();
            },
            cancel: function(touch) {
               $scope.touch=touch;
               $scope.$apply();
            },
            move: function(touch) {
               $scope.touch=touch;
               $scope.$apply();
            },
            end: function(touch) {
               $scope.touch=touch;
               $scope.$apply();
            }
         });
      }
   };
}]);

app.js内の完全なコードは次のとおりです-

/* eslint no-alert: 0 */

'use strict';
//
// Here is how to define your module
// has dependent on mobile-angular-ui
//
var app=angular.module('myFirstApp', ['ngRoute',
   'mobile-angular-ui',
   'mobile-angular-ui.gestures',
]);
app.config(function($routeProvider, $locationProvider) {
   $routeProvider
   .when("/", {
      templateUrl : "src/home/home.html"
   });
   $locationProvider.html5Mode({enabled:true, requireBase:false});
});
app.directive('touchtest', ['$touch', function($touch) {
   return {
      restrict: 'C',
      link: function($scope, elem) {
         $scope.touch=null;
         $touch.bind(elem, {
            start: function(touch) {
               $scope.containerRect=elem[0].getBoundingClientRect();
               $scope.touch=touch;
               $scope.$apply();
            },
            cancel: function(touch) {
               $scope.touch=touch;
               $scope.$apply();
            },
            move: function(touch) {
               $scope.touch=touch;
               $scope.$apply();
            },
            end: function(touch) {
               $scope.touch=touch;
               $scope.$apply();
            }
         });
      }
   };
}]);
app.controller('MainController', function($rootScope, $scope, $routeParams) {
   $scope.msg="Welcome to TutorialsPoint!";
});

src/home/home.html

ディレクティブtouchtestは、以下に示すようにhtml内で使用されます-

<div class="section touchtest">
   <h4>Touch Around on the screen to see the values changing</h4>
   <div>
      <p>type: {{touch.type}}</p>
      <p>direction: {{touch.direction == null ? '-' : touch.direction}}</p>
      <p>point: [{{touch.x}}, {{touch.y}}]</p>
      <p>step: {{touch.step}} [{{touch.stepX}}, {{touch.stepY}}]</p>
      <p>distance: {{touch.distance}} [{{touch.distanceX}}, {{touch.distanceY}}]</p>
      <p>total: {{touch.total}} [{{touch.totalX}}, {{touch.totalY}}]</p>
      <p>velocity: {{touch.velocity}} px/sec</p>
      <p>averageVelocity: {{touch.averageVelocity}} px/sec</p>
      <p>angle: {{touch.angle == null ? '-' : touch.angle}} deg</p>
   </div>
</div>

次に、ブラウザで表示をテストしてみましょう。結果の画面は次のとおりです-

ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved