タッチパネルの中のJavaScriptイベント
2459 ワード
一、タッチイベント ontouchstart ontouchmove ontouchend ontouchcancel 現在、モバイル端末のブラウザは、IEを含む4つのタッチイベントをサポートしています.タッチパネルもMouseEventをサポートしていますので、順番は注意が必要です.
touch start → mouseover → mousemove → mousedown → mouseup → click
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
var div
を選択します. document.
getElemenntById
(
「div」
)
;
//touchstart似たmousedown
div.
ontouch start
を選択します.
機能
(e)
)
{
//イベントのtouches属性は1つの配列で、1つの要素は同じ時刻の1つのタッチポイントを表しています.これにより、touchesを通じて多点タッチの各タッチポイントを取得できます.
//私たちはタッチが一つしかないので、直接[0]を指します.
var touch
を選択します. e.
touches
［
」
;
//現在のタッチポイントの座標を取得すると、MouseEventイベントのclientX/clientYに相当します.
var x
を選択します. touch.
client X
;
var y
を選択します. touch.
client
;
)
;
//touchmove似たmousemove
div.
ontouchmove
を選択します.
機能
(e)
)
{
//touchstart、touchmoveイベントにpreventDefaultを加えて、タッチ時のブラウザのスケーリング、スクロールバーのスクロールなどを防ぐことができます.
e.
preventDefault
(
)
;
)
;
//touchend似mouseup
div.
ontouchup
を選択します.
機能
(e)
)
{
//nothing to do
)
;
二、ジェスチャー事件
ジェスチャーとは、多点タッチで回転、引張などの操作を行います.例えば、写真、ウェブページの拡大、回転などです.二つ以上の指が同時に触れるとジェスチャーイベントが発生します.ズームに関して注意したいのは元素の位置座標です.オフセットX、get BoundingCientRectなどを使って元素の位置座標を取得しますが、携帯ブラウザではページがよく使用中にスケーリングされます.スケーリング後の元素座標は変わりますか?答えは違います.この問題を1つのシナリオで説明します.ページAのロードが完了した後、JavaScriptはその要素のdocument内の座標が(100,100)であることを取得して、ユーザーがページを拡大しました.この時、JavaScriptで要素座標を再度出力しても、依然として(100,100)ですが、画面上の応答領域はズーム比によってオフセットが発生します.レンガゲームのデモを開けてもいいです.ページが完全にロードされたら拡大してください.この時に指をタッチして「touch here」エリアの外に触れても、ボールプレートをコントロールできます.エリアがずれています.ページの更新または拡大縮小を再開しない限り、オフセットは常に存在します.
1
2
3
4
5
6
7
8
9
10
var div
を選択します. document.
getElemenntById
(
「div」
)
;
div.
ongesture change
を選択します.
機能
(e)
)
{
//scaleはジェスチャーによるズーム率を表しています.1より小さいのは縮小で、1より大きいのは拡大で、元は1です.
var scale
を選択します. e.
scale
;
//rotationは、回転ジェスチャーの角度、値区間[0,360]を表し、正の値は時計回りに回転し、負の値は反時計回りに回転します.
var グーグル
を選択します. e.
ロテート
;
)
;
三、重力センサー
touch start → mouseover → mousemove → mousedown → mouseup → click
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
var div
を選択します. document.
getElemenntById
(
「div」
)
;
//touchstart似たmousedown
div.
ontouch start
を選択します.
機能
(e)
)
{
//イベントのtouches属性は1つの配列で、1つの要素は同じ時刻の1つのタッチポイントを表しています.これにより、touchesを通じて多点タッチの各タッチポイントを取得できます.
//私たちはタッチが一つしかないので、直接[0]を指します.
var touch
を選択します. e.
touches
［
」
;
//現在のタッチポイントの座標を取得すると、MouseEventイベントのclientX/clientYに相当します.
var x
を選択します. touch.
client X
;
var y
を選択します. touch.
client
;
)
;
//touchmove似たmousemove
div.
ontouchmove
を選択します.
機能
(e)
)
{
//touchstart、touchmoveイベントにpreventDefaultを加えて、タッチ時のブラウザのスケーリング、スクロールバーのスクロールなどを防ぐことができます.
e.
preventDefault
(
)
;
)
;
//touchend似mouseup
div.
ontouchup
を選択します.
機能
(e)
)
{
//nothing to do
)
;
二、ジェスチャー事件
ジェスチャーとは、多点タッチで回転、引張などの操作を行います.例えば、写真、ウェブページの拡大、回転などです.二つ以上の指が同時に触れるとジェスチャーイベントが発生します.ズームに関して注意したいのは元素の位置座標です.オフセットX、get BoundingCientRectなどを使って元素の位置座標を取得しますが、携帯ブラウザではページがよく使用中にスケーリングされます.スケーリング後の元素座標は変わりますか?答えは違います.この問題を1つのシナリオで説明します.ページAのロードが完了した後、JavaScriptはその要素のdocument内の座標が(100,100)であることを取得して、ユーザーがページを拡大しました.この時、JavaScriptで要素座標を再度出力しても、依然として(100,100)ですが、画面上の応答領域はズーム比によってオフセットが発生します.レンガゲームのデモを開けてもいいです.ページが完全にロードされたら拡大してください.この時に指をタッチして「touch here」エリアの外に触れても、ボールプレートをコントロールできます.エリアがずれています.ページの更新または拡大縮小を再開しない限り、オフセットは常に存在します.
1
2
3
4
5
6
7
8
9
10
var div
を選択します. document.
getElemenntById
(
「div」
)
;
div.
ongesture change
を選択します.
機能
(e)
)
{
//scaleはジェスチャーによるズーム率を表しています.1より小さいのは縮小で、1より大きいのは拡大で、元は1です.
var scale
を選択します. e.
scale
;
//rotationは、回転ジェスチャーの角度、値区間[0,360]を表し、正の値は時計回りに回転し、負の値は反時計回りに回転します.
var グーグル
を選択します. e.
ロテート
;
)
;
三、重力センサー