9.8. タッチイベント

#タッチイベント

タッチ操作の概要

ブラウザのタッチ API は 3 つの部分で構成されます。

タッチ：タッチポイント
TouchList: 複数のタッチポイントのコレクション
TouchEvent: タッチによってトリガーされるイベントインスタンス

「Touch」インターフェイスのインスタンスオブジェクトは、位置、サイズ、形状、圧力、ターゲット要素などの属性を含むタッチポイント (指またはタッチペン) を表すために使用されます。場合によっては、タッチアクションが複数のタッチポイント (複数の指) で構成され、複数のタッチポイントのコレクションが TouchList インターフェイスのインスタンスオブジェクトによって表されます。「TouchEvent」インターフェイスのインスタンスオブジェクトは、タッチによって引き起こされるイベントを表します。このタイプのイベントをトリガーできるのはタッチスクリーンだけです。

多くの場合、現時点ではマウスが使用されていない場合でも、タッチイベントとマウスイベントが同時にトリガーされます。これは、マウスイベントのみを定義し、タッチイベントを定義しないコードがタッチスクリーン上で動作できるようにするためです。この状況を回避したい場合は、event.preventDefault メソッドを使用して、マウスイベントが発行されないようにすることができます。

タッチインターフェイス

タッチインターフェースの概要

Touch インターフェイスは単一のタッチポイントを表します。タッチポイントは指であってもよいし、タッチペンであってもよい。

ブラウザーは、「Touch」インスタンスの生成に使用される「Touch」コンストラクターをネイティブに提供します。

var touch = 新しい Touch(touchOptions);

Touch コンストラクターは、次のプロパティを持つ構成オブジェクトをパラメーターとして受け入れます。

identifier: 必須。タイプは整数で、タッチポイントの一意の ID を表します。
target: 必須。タイプは要素ノードで、タッチポイントが開始する Web ページ要素を示します。
clientX: オプション。タイプは数値で、ブラウザウィンドウの左上隅を基準としたタッチポイントの水平距離を示します。デフォルトは 0 です。
clientY: オプション。タイプは数値で、ブラウザウィンドウの左上隅を基準としたタッチポイントの垂直距離を示します。デフォルトは 0 です。
screenX: オプション。タイプは数値で、画面の左上隅を基準としたタッチポイントの水平距離を示します。デフォルトは 0 です。
screenY: オプション。タイプは数値で、画面の左上隅を基準としたタッチポイントの垂直距離を示します。デフォルトは 0 です。
pageX: オプション。タイプは数値で、Web ページの左上隅を基準としたタッチポイントの水平位置 (つまり、ページのスクロール距離を含む) を示します。デフォルトは 0 です。
pageY: オプション。タイプは数値で、Web ページの左上隅を基準としたタッチポイントの垂直位置を示します (つまり、ページのスクロール距離を含みます)。デフォルトは 0 です。
radiusX: オプション。タイプは数値で、タッチポイントの周囲の影響を受ける楕円の X 軸半径を示します。デフォルトは 0 です。
radiusY: オプション: タイプは、タッチポイントの周囲の影響を受ける楕円の Y 軸半径を示す数値です。デフォルトは 0 です。
rotationAngle: オプション。タイプは数値で、タッチ領域内の楕円の回転角度を示します。単位は度で、0 ～ 90 度の範囲で、デフォルト値は 0 です。
force: オプション。タイプはタッチ圧力を示す 0 から 1 までの範囲の数値です。「0」は圧力がないことを表し、「1」はハードウェアによって認識される最大圧力を表し、デフォルトは「0」です。

タッチインターフェイスのインスタンスプロパティ

(1)タッチ識別子

Touch.identifier プロパティは、タッチポイントの一意の ID を表す整数を返します。この値は、タッチイベントが終了するまで、タッチプロセスを通じて変更されません。

someElement.addEventListener('touchmove', function (e) {
  for (var i = 0; i < e.changedTouches.length; i++) {
    console.log(e.changedTouches[i].identifier);
  }
}、 間違い）;

(2)Touch.screenX、Touch.screenY、Touch.clientX、Touch.clientY、pageX、pageY

Touch.screenX プロパティと Touch.screenY プロパティは、ページがスクロールされているかどうかに関係なく、画面の左上隅を基準としたタッチポイントの横座標と縦座標をそれぞれ表します。

Touch.clientX プロパティと Touch.clientY プロパティは、ページがスクロールされているかどうかに関係なく、ブラウザのビューポートの左上隅を基準としたタッチポイントの横座標と縦座標をそれぞれ表します。

Touch.pageX プロパティと Touch.pageY プロパティはそれぞれ、現在のページの左上隅を基準としたタッチポイントの横座標と縦座標を表します。これには、ページのスクロールによって生じる変位も含まれます。

(3)Touch.radiusX、Touch.radiusY、Touch.rotationAngle

Touch.radiusX プロパティと Touch.radiusY プロパティは、タッチポイントを中心とした影響を受ける楕円の X 軸半径と Y 軸半径をそれぞれピクセル単位で返します。 2 を掛けると、タッチ範囲の幅と高さが得られます。

Touch.rotationAngle プロパティは、タッチ領域内の楕円の回転角度を 0 度から 90 度までの度数で表します。

上記の 3 つの属性は、ユーザーが画面に接触している領域を共同で定義します。これは、指などの不正確なタッチを説明するのに非常に役立ちます。指先が画面に触れると、タッチ範囲は楕円を形成します。この楕円領域を表すために、次の 3 つの属性が使用されます。

ここに例を示します。

div.addEventListener('タッチスタート', 回転);
div.addEventListener('touchmove', 回転);
div.addEventListener('タッチエンド', 回転);

関数回転(e) {
  var touch = e.changedTouches.item(0);
  e.preventDefault();

  src.style.width = touch.radiusX * 2 + 'px';
  src.style.height = touch.radiusY * 2 + 'px';
  src.style.transform = 'rotate(' + touch.rotationAngle + 'deg)';
};

(4)タッチフォース

「Touch.force」プロパティは、タッチの圧力を示す「0」から「1」までの値を返します。「0」は圧力がないことを表し、「1」はハードウェアによって認識される最大圧力を表します。

(5)タッチターゲット

Touch.target プロパティは、タッチが発生した要素ノードを表す要素ノードを返します。このプロパティは、タッチポイントがこのノードから離れた場合でも変更されません。

タッチリストインターフェイス

TouchList インターフェイスはタッチポイントのコレクションを表します。そのインスタンスは配列状のオブジェクトで、そのメンバーはすべてのタッチポイントを表す Touch のインスタンスオブジェクトです。ユーザーが 3 本の指でタッチすると、生成された TouchList インスタンスには 3 つのメンバーが含まれ、各指のタッチポイントが 1 つの Touch インスタンスオブジェクトに対応します。

そのインスタンスは主に、タッチイベントの TouchEvent.touches、TouchEvent.changedTouches、および TouchEvent.targetTouches プロパティを通じて取得されます。

インスタンスプロパティとインスタンスメソッドは 2 つだけです。

TouchList.length: メンバーの数 (つまり、タッチポイントの数) を示す数値。
TouchList.item(): 指定された位置のメンバーを返します。そのパラメータはメンバーの位置番号 (0 から始まります) です。

TouchEvent インターフェース

概要

TouchEvent インターフェイスは Event インターフェイスから継承し、通常はタッチスクリーンまたはトラックパッドからのタッチによってトリガーされるイベントインスタンスを表します。継承されたプロパティに加えて、独自のプロパティがいくつかあります。

ブラウザーは、タッチイベントのインスタンスを生成するための TouchEvent() コンストラクターをネイティブに提供します。

new TouchEvent(タイプ、オプション)

TouchEvent() コンストラクターは 2 つのパラメーターを受け入れることができます。最初のパラメーターはイベントの種類を示す文字列であり、2 番目のパラメーターはイベントの設定オブジェクトです。このパラメーターはオプションであり、オブジェクトのすべてのプロパティもオプションです。。「Event」インターフェースの構成プロパティに加えて、このインターフェースには独自の構成プロパティがいくつかあります。

touches: 現在アクティブなすべてのタッチポイントを表す TouchList インスタンス。デフォルト値は空の配列 [] です。
targetTouches: TouchList インスタンス。タッチされたターゲット要素ノード内にあり、まだアクティブなすべてのタッチポイントを表します。デフォルト値は空の配列 [] です。
changedTouches: このタッチイベントの関連タッチポイントを表す TouchList インスタンス。デフォルト値は空の配列 [] です。
ctrlKey: Ctrl キーが同時に押されたかどうかを示すブール値。デフォルト値は false です。
shiftKey: Shift キーが同時に押されたかどうかを示すブール値。デフォルト値は false です。
altKey: Alt キーが同時に押されたかどうかを示すブール値。デフォルト値は false です。
metaKey: Meta キー (または Windows キー) が同時に押されたかどうかを示すブール値。デフォルト値は false です。

インスタンスのプロパティ

TouchEvent インターフェイスのインスタンスには、「Event」インスタンスのすべてのプロパティとメソッドに加えて、独自のインスタンスプロパティの一部があり、それらはすべて読み取り専用です。

(1) TouchEvent.altKey、TouchEvent.ctrlKey、TouchEvent.shiftKey、TouchEvent.metaKey

TouchEvent.altKey: タッチ時に Alt キーが押されたかどうかを示すブール値。
TouchEvent.ctrlKey: タッチ時に Ctrl キーが押されたかどうかを示すブール値。
TouchEvent.shiftKey: ブール値: タッチ時に Shift キーが押されたかどうかを示します。
TouchEvent.metaKey: タッチ時に Meta キー (または Windows キー) が押されたかどうかを示すブール値。

ここに例を示します。

someElement.addEventListener('touchstart', function (e) {
  console.log('altKey = ' + e.altKey);
  console.log('ctrlKey = ' + e.ctrlKey);
  console.log('metaKey = ' + e.metaKey);
  console.log('shiftKey = ' + e.shiftKey);
}、 間違い）;

(2)TouchEvent.changedTouches

TouchEvent.changedTouches プロパティは、TouchList インスタンスを返します。そのメンバーは、このタッチイベントの関連タッチポイントを表す Touch インスタンスオブジェクトのグループです。

この属性は、時間ごとに異なる意味を持ちます。

touchstartイベント: アクティブ化されたタッチポイント
touchmoveイベント: 変更されたタッチポイント
touchend イベント: 消えるタッチポイント (つまり、タッチされなくなったポイント)

ここに例を示します。

someElement.addEventListener('touchmove', function (e) {
  for (var i = 0; i < e.changedTouches.length; i++) {
    console.log(e.changedTouches[i].identifier);
  }
}、 間違い）;

(3)TouchEvent.touches

TouchEvent.touches プロパティは、メンバーがすべてまだアクティブな (つまり、接触している) タッチポイントである TouchList インスタンスを返します。一般的に言えば、指はタッチポイントです。

ここに例を示します。

someElement.addEventListener('touchstart', function (e) {
  switch (e.touches.length) {
    // 指一本タッチ
    ケース 1: handle_one_touch(e);
    // 2 本指タッチ
    ケース 2: handle_two_touches(e);
    // 3本指タッチ
    ケース 3: handle_three_touches(e);
    // その他の状況
    デフォルト: console.log('サポートされていません');
  }
}、 間違い）;

(4)TouchEvent.targetTouches

TouchEvent.targetTouches プロパティは、タッチイベントのターゲット要素ノード内でまだアクティブな (つまりタッチされている) タッチポイントをすべてメンバーとする TouchList インスタンスを返します。

関数 touch_in_target(ev) {
  return (ev.touches.length === ev.targetTouches.length ? true : false);
}

上記のコードは、すべてのタッチポイントがターゲット要素内にあるかどうかを判断するために使用されます。

タッチイベントの種類

タッチによるイベントには以下の種類があります。どのようなイベントが発生したかは「TouchEvent.type」プロパティで確認できます。

touchstart: ユーザーがタッチを開始するとトリガーされ、その target プロパティはタッチが発生した要素ノードを返します。
touchend: ユーザーがタッチスクリーンに触れなくなったとき (または画面の端から移動したとき) にトリガーされます。その target 属性は、タッチが開始された要素ノードである touchstart イベントと一致します。。その changedTouches プロパティは、タッチされなくなったすべてのタッチポイントを含む TouchList インスタンス (つまり、Touch インスタンスオブジェクト) を返します。
touchmove: ユーザーがタッチポイントを移動するとトリガーされ、その target 属性は touchstart イベントと一致します。このイベントは、タッチの半径、角度、強さが変化した場合にもトリガーされます。
touchcancel: タッチポイントがキャンセルされた場合、たとえば、タッチエリアにモーダルウィンドウがポップアップした場合、タッチポイントがドキュメントエリアから離れた場合 (ブラウザのメニューバーに入った場合)、ユーザーのタッチポイントが多すぎて超過した場合にトリガーされます。サポートされている制限値 (以前のタッチポイントは自動的にキャンセルされます)。

以下に例を示します。

var el = document.getElementsByTagName('canvas')[0];
el.addEventListener('タッチスタート', handleStart, false);
el.addEventListener('touchmove', handleMove, false);

関数 handleStart(evt) {
  evt.preventDefault();
  var touch = evt.changedTouches;
  for (var i = 0; i < touchs.length; i++) {
    console.log(touches[i].pageX, touchs[i].pageY);
  }
}

関数 handleMove(evt) {
  evt.preventDefault();
  var touch = evt.changedTouches;
  for (var i = 0; i < touchs.length; i++) {
    var touch = touch[i];
    console.log(touch.pageX, touch.pageY);
  }
}

作者: wangdoc

アドレス: https://wangdoc.com/

ライセンス: クリエイティブ・コモンズ 3.0

前の章次の章