[js点滴]JavaScriptのタッチイベント07

事件に触れる
タッチAPIは3つのオブジェクトから構成される.

タッチ

TouchList

TouchEvent

タッチポイント(指一本またはタッチペン一本)を表し、位置、大きさ、形状、圧力、目標要素などの属性を含むタッチ動作を記述する.タッチ動作は複数のタッチポイント(複数の指または複数のタッチペン)から構成され、複数のタッチポイントの集合はTouchListオブジェクトによって表される場合がある.タッチによるイベントはタッチパネルだけで起こります.
多くの場合、タッチイベントとマウスイベントが同時に触発されますが、この時はマウスを使っていません.これは、マウスイベントのみを定義し、タッチイベントを定義していないコードをタッチパネルの場合に使うためです.このような状況を避けるためには、preventDefault方法でマウスイベントの送信を阻止することができます.
タッチオブジェクト
タッチポイントを表します.タッチポイントは指一本かもしれません.タッチペンかもしれません.以下の属性があります.
(1)identifer
identifer属性は、Touchの例のユニークな識別子を表します.それは全体のタッチの間に不変です.

var id = touchItem.identifier;

Touch Listオブジェクトのidentifed Touchメソッドは、この属性に基づいて、1つのセットから対応するTouchオブジェクトを取り出すことができます.
(2)screenX、screenY、clientX、clientY、pageX、pageY
screenX属性とscreenY属性は、画面左上隅に対するタッチポイントの横座標と縦軸をそれぞれ表し、ページのスクロールに関係ない.
clientX属性とclientY属性は、ブラウザの視角の左上隅に対するタッチポイントの横座標と縦軸をそれぞれ表し、ページのスクロールに関係ない.
PageX属性とPageY属性は、現在のページの左上隅に対するタッチポイントの横座標と縦座標をそれぞれ表し、ページのスクロールによるシフトを含んでいます.
(3)radiusX、radiusy、rotationAngle
radiusX属性とradiusy属性は、タッチポイントの周りに影響を受ける楕円範囲のX軸とY軸をそれぞれ返し、単位はピクセルです.
rotationAngle属性はタッチ領域の楕円の回転角度を表し、単位は度数で、0から90度の間にあります.
上記の3つの属性は、ユーザが画面に接触する領域を共通に定義し、指のような非正確なタッチを記述するのに役立つ.指先がスクリーンに触れて、タッチ範囲が楕円形になります.この3つの属性はこの楕円領域を記述するのに使います.
(4)フォーム
フォース属性は0から1の値を返し、タッチ圧力を表します.0は圧力がないことを表し、1はハードウェアで識別できる最大圧力を表します.
(5)target
target属性はElementノードに戻り、タッチが発生したノードを表します.
TouchListオブジェクト
TouchListオブジェクトは同じ配列のオブジェクトで、メンバーはタッチイベントに関するすべてのタッチポイントです.例えば、ユーザが3本の指でタッチすると、発生したTouchListオブジェクトには3人のメンバーがいて、指一本には1つのTouchオブジェクトが対応しています.
TouchListの例のlength属性は、TouchListオブジェクトのメンバー数を返します.
Touch Listの例のidentifed Touch方法とitem方法は、それぞれID属性とインデックス値(0から開始)をパラメータとして使用して、指定されたTouchオブジェクトを取り出す.
TouchEventオブジェクト
TouchEventオブジェクトは、EventオブジェクトとUEventオブジェクトを引き継ぎ、タッチによるイベントを表します.受け継がれた属性以外にも、自分の属性があります.
(1)キーボード関連属性
以下の属性は読み取り専用の属性で、ブール値を返します.タッチしながら、キーを押しますか?

altKeyがaltキー

を押すかどうか

ctrlKeyはctrlキー

を押しますか?

metaKeyがmetaキー

を押したかどうか

shiftKeyはshiftキー

を押しますか?
(2)changed Touches
changed Touches属性は、現在のタッチイベントによって引き起こされるすべてのタッチポイントを含むTouch Listオブジェクトを返します.
touch startイベントに対して、アクティブなタッチポイントを表します.touchmoveイベントに対して、変化が起こるタッチポイントを表します.touchendイベントについては、消えたタッチポイント(つまり、触れられないポイント)を表します.

var touches = touchEvent.changedTouches;

(3)target Touches
タッチトTouches属性はTouchListオブジェクトに戻り、タッチのターゲットElementノード内部を含み、すべてがまだアクティブなタッチポイントになります.

var touches = touchEvent.targetTouches;

(4)touches
タッチポイントとしては、タッチポイントがアクティブなままのすべてのオブジェクトを返します.

var touches = touchEvent.touches;

タッチイベントの種類
タッチによるイベントには、以下のような種類があります.Touch Event.type属性により、どのようなイベントが発生しているのか確認できます.

touchstart:ユーザがタッチスクリーンに接触するとトリガされ、そのtarget属性はタッチされたElementノードに戻る.

touchend:ユーザがタッチスクリーンに接触しない時(または画面の端を移動する時)に触発され、そのtarget属性はtouchstartイベントのtarget属性と一致しており、そのchanged Touches属性はタッチしないすべてのタッチポイント(Touchオブジェクト)を含むTouchListオブジェクトに戻る.

touchmove:タッチポイントをユーザが移動するとトリガされ、そのtarget属性はtouchstartイベントのtarget属性と一致します.タッチの半径、角度、力加減が変化すると、イベントが発生します.

touchcancel:タッチポイントのキャンセル時に触発され、例えばタッチエリアからステータスウィンドウ(modal window)が飛び出し、タッチポイントがドキュメントエリア(ブラウザメニューバー領域に入る)から離れ、ユーザーがより多くのタッチポイントを置く(自動的に前のタッチポイントをキャンセルする).

次は一例です.

var el = document.getElementsByTagName("canvas")[0];
el.addEventListener("touchstart", handleStart, false);
el.addEventListener("touchmove", handleMove, false);

Fnction handleStart(//ブラウザがタッチイベントを処理し続けるのを阻止し、/マウスイベントevt.preventDefault();var touches=evt.changed Touches;
for(var i=0;i＜touches.length;i+)｛consolie.logs(touches[i].pageX,touches[i].pageY];｝
function handlemove(evt){evt.prevent Default();var touches=evt.changed Touches;
for(var i=0;i＜touches.length;i＋)｛var id=touches[i].identifer;var touch=touches.identifed Touch(id);consolune.log(touch.pageX,touch.pageY);｝
フォームイベント
イベント、イベント、イベント
以下のイベントはフォームメンバーの値の変化に関連します.
(1)inputイベント
inputイベントの場合、の値が変化した場合にトリガします.また、conteteteditable属性の要素を開くと、値が変わるとinputイベントが発生します.
inputイベントの特徴の一つは、ユーザーがボタンを押すたびに、inputイベントをトリガするような連続トリガがあることです.
(2)selectイベント
selectイベントは、テキストを選択するとトリガされます.

// HTML   
// 

var elem=document.getElemenntById(‘test’);elem.addEvent Listener(‘select’,function()｛consone.logn(‘Select changed!])},false);
(3)Changeイベント
Changeイベント、、の値が変化したときにトリガします.inputイベントとの最大の違いは、連続してトリガしないことであり、全ての修正が完了した時にのみトリガされ、inputイベントは必ずchangeイベントを引き起こします.具体的には、次のような状況に分けられます.

は、単一選択ボックスまたはチェックボックスをアクティブにするときにトリガされます.

ユーザが提出したときにトリガします.例えば、以下のリストから選択を完了し、日付またはファイル入力ボックスで選択を完了します.

は、テキストボックスまたはtextarea要素の値が変化し、焦点がなくなったときにトリガする.

次は一例です.

// HTML   
// 
//   chocolate
//   strawberry
//   vanilla
// 
 
   
  function changeEventHandler(event) { console.log(‘You like ’ + event.target.value + ’ ice cream.’); }  
  reset  ，submit   
              ，            。 
  （1）reset   
  reset       （           ）   。 
  （2）submit   
  submit                。  ，submit        form  ，   button  （       submit），        ，     。