タッチスクリーンでの JavaScript イベント分析_JavaScript スキル

この記事の例では、タッチ スクリーンでの JavaScript イベントについて説明します。皆さんの参考に共有してください。具体的な分析は次のとおりです。

1.タッチイベント

タッチスタート時
オンタッチムーブ
オンタッチエンド
ontouchcancel 現在、IE を含むすべてのモバイル ブラウザーは、これら 4 つのタッチ イベントをサポートしています。タッチ スクリーンは MouseEvent もサポートしているため、その順序に注意する必要があります: touchstart → Mouseover → Mousemove → Mousedown → Mouseup → click1

例は次のとおりです:

/**
* onTouchEvent
*/
var div = document.getElementById("div");
//touchstart类似mousedown
div.ontouchstart = function(e){
//事件的touches属性是一个数组，其中一个元素代表同一时刻的一个触控点，
//从而可以通过touches获取多点触控的每个触控点
//由于我们只有一点触控，所以直接指向[0]
var touch = e.touches[0];
//获取当前触控点的坐标，等同于MouseEvent事件的clientX/clientY
var x = touch.clientX;
var y = touch.clientY;
};
//touchmove类似mousemove
div.ontouchmove = function(e){
//可为touchstart、touchmove事件加上preventDefault从而阻止触摸时，
//浏览器的缩放、滚动条滚动等
e.preventDefault();
};
//touchend类似mouseup
div.ontouchup = function(e){
//nothing to do
};

2. ジェスチャー イベント ジェスチャーとは、マルチタッチを使用して、写真や Web ページの拡大や回転などの回転や伸縮などの操作を実行することを指します。ジェスチャ イベントは、2 本以上の指が同時に触れた場合にのみトリガーされます。スケーリングに関して注意する必要があるのは、要素の位置座標です。通常、要素の位置座標を取得するには、offsetX、getBoundingClientRect などのメソッドを使用します。ただし、モバイル ブラウザでは、使用中にページがスケーリングされることがよくあります。スケールされた要素の座標が変化します。答えは、それは異なるということです。この問題を説明するためにシナリオを使用してみましょう。ページ A がロードされた後、JavaScript はドキュメント内の要素の座標を (100,100) として取得します。このとき、ユーザーはページをズームインして出力します。要素の座標は再び (100,100) のままですが、画面上の要素の応答領域はスケーリングに基づいてオフセットされます。 Brick Breaker ゲームのデモを開き、ページが完全にロードされるまで待ってからズームインできます。このとき、指が「ここにタッチ」領域の外側に触れた場合でも、引き続きコントロールできることがわかります。エリアがオフセットされているため、ボールボード。オフセットは、ページが更新されるか、スケーリングが再開されない限り保持されます。

/**
* onGestureEvent
*/
var div = document.getElementById("div");
div.ongesturechange = function(e){
//scale代表手势产生的缩放比例，小于1是缩小，大于1是放大，原始为1
var scale = e.scale;
//rotation代表旋转手势的角度，值区间[0,360]，正值顺时针旋转，负值逆时针
var angle = e.rotation;
};

3. 重力感知 重力感知は、onorientationchange イベントを body ノードに追加するだけで済みます。このイベントでは、現在の携帯電話の向きを表す値が window.orientation プロパティから取得されます。 window.orientation の値リストは次のとおりです:

0: ページが最初にロードされたときと同じ方向
-90: 元の方向に対して時計回りに 90°回転
180: 180°回転
90: 反時計回りに 90 度回転しました。私のテストによると、Android 2.1 はまだ重力検知をサポートしていません。上記は現在のタッチ スクリーン イベントです。これらのイベントはまだ標準に組み込まれていませんが、すでに広く使用されています。私は Android 2.1 を使用していますが、他の環境ではテストしていません。

この記事が皆様の JavaScript プログラミング設計に役立つことを願っています。