移動端タッチイベント
3398 ワード
目には指のスライドを実現するインタラクションが必要であり、pc端はmousedown、mousemove、mouseupリスニングを使用して実現される.
しかしiosデバイスではmousemoveは傍受しにくい.同類の方法はtouchstart,touchmove,touchendである.
プロジェクトの要件は、ドラッグイベントを使用する必要があります.IE 8などのローエンドブラウザの互換性を考慮する必要がないため、HTML 5の
一、clickクリックイベント
イベントをクリックすると、PC側のclickと似ていますが、移動側では連続clickのトリガが200 ms~300 msの遅延があります.
二、touchタッチイベント
タッチイベントには、touchstart touchmove touchend touchcancelの4種類があり、よく使われています.
touchstart:バインドされた要素に新しい指が触れると、イベントがトリガーされます.
touchmove:指がバインドされている要素が常にトリガーされ、トリガー条件から正確には指が移動している場合にのみトリガーされます.しかし、テストを経て、この検出は非常に感度が高く、人為的な指が動かず、システムも細かい移動を検出します.だからずっとトリガーされます.
touchend:バインド要素から指が持ち上がると、一度トリガーされます.
touchcancel:指がスクリーンに触れたときに突然alertが鳴ったり、システム内の他のtouchを中断した動作がトリガーされたりするなど、システムによって実行可能なトリガ(よくないイベント)です.
2.1イベントリスト
移動先の上の3つのタッチイベントには、各イベントに以下のリストがあります.
changedTouches:すべての開始イベントの指情報を保存
targetTouches:現在のオブジェクト上のすべてのタッチポイントのリストを保存します.
touches:現在のタッチスクリーンの指情報をすべて保存
2.1.1イベント属性(読取り専用属性)
移動端はイベント属性の配列要素の属性に触れます:各イベントにはリストがあり、各イベントリストには以下の属性があります.
pageX//ページのX座標に対してclientXとは異なり、左側のスクロール距離も含まれています.もしあれば.
PageY//ページのY座標に対してclientYとは異なり、上をスクロールする距離も含まれています.もしあれば.
ClientX//ビュー領域のX座標に対して、左側のスクロール距離は含まれません.
ClientY//ビュー領域のY座標に対して、上のスクロール距離は含まれません.
スクリーンに対するX座標
スクリーンに対するY座標
identifier//は、Touchオブジェクトごとにユニークなidentifierを表します.このidentifierがあれば、このTouchオブジェクトを常に追跡できることを保証します.
target//指で触れるDOM要素
Touch.radiusX//ユーザとタッチプレーンとの接触面を囲む最小楕円の水平軸(X軸)半径.この値の単位はscreenXと同じです.読み取り専用プロパティ.
Touch.radiusY//ユーザとタッチプレーンとの接触面を囲む最小楕円の垂直軸(Y軸)半径.この値の単位はscreenYと同じです.読み取り専用プロパティ.
Touch.rotationAngle//radiusXとradiusYで記述された正方向の楕円は、この角度値を時計回りに回転させることで、ユーザーとタッチプレーンの接触面を最も正確に覆うことができます.読み取り専用プロパティ.
Touch.force//指押しタッチプレーンの圧力の大きさ、0.0(圧力なし)から1.0(最大圧力)までの浮動小数点数.読み取り専用プロパティ.
var pos={x:e.touches[0].clientX,y:e.touches[0].clientY}/*移動端ドラッグスライド座標を取得*/
const touchY = e.touches[0].clientY - 79;//縦座標を指でドラッグ
例えば、指がドラッグスライドする座標位置を取得するにはeventを直接使用する.ClientXは役に立たないeventを使う.changedTouches[0].クライアントXがいいのですが、
jqueryのeventオブジェクトの場合eventを使用します.originalEvent.changedTouches[0].clientX.
呼び出しイベントメソッド:(1)jqueryメソッド:$(document).bind("touchend", function(e){});(2)javascriptメソッド:document.addEventListener("touchend",function(e){});
三、tap類タッチイベント
タッチイベントは、touchとの違いはまだ分かりませんが、clickイベントの代わりに一般的に使われています.tap longTap singleTap doubleTapの4種類があり、clickイベントの代わりにtapを使うことがあります.
tap:指がスクリーンに触れるとトリガーされます
longTap:指を長く押すと画面がトリガーされます
singleTap:指がスクリーンに触れるとトリガーされます
doubleTap:指で画面をダブルクリックするとトリガーされます
四、swipeスライドイベント
スライドイベントには、swipe swipe Left swipe Right swipe Up swipe Downの5種類があります
swipe:指が画面をスライドするとトリガーされます
swipeLeft:指が画面を左にスライドするとトリガーされます
swipe Right:指が画面を右にスライドするとトリガーされます
swipeUp:指が画面上をスライドするとトリガーされます
swipe Down:指が画面を下にスライドするとトリガーされます
五、gestureジェスチャーイベント
2つの指がスクリーンに触れるとジェスチャーが発生し、ジェスチャーは通常、表示項目のサイズを変更したり、表示項目を回転したりします.ジェスチャーイベントは3つあり、それぞれ以下の通りです.
Gesturestart:1つの指が画面の上に押され、もう1つの指が画面に触れたときにトリガーされます.
Gesturechange:タッチスクリーンのいずれかの指の位置が変化したときにトリガーされます.
Gestureend:いずれかの指が画面上から移動するとトリガーされます.
バインドされた要素に新しい指が触れると、イベントがトリガーされます.
転載先:https://www.cnblogs.com/jing-tian/p/11049705.html
しかしiosデバイスではmousemoveは傍受しにくい.同類の方法はtouchstart,touchmove,touchendである.
プロジェクトの要件は、ドラッグイベントを使用する必要があります.IE 8などのローエンドブラウザの互換性を考慮する必要がないため、HTML 5の
dragイベントを考えると、モバイル端末android & IOSはdragイベントをサポートしていないことがわかります.モバイル端末でよく使われるイベントをご紹介しましょう一、clickクリックイベント
イベントをクリックすると、PC側のclickと似ていますが、移動側では連続clickのトリガが200 ms~300 msの遅延があります.
二、touchタッチイベント
タッチイベントには、touchstart touchmove touchend touchcancelの4種類があり、よく使われています.
touchstart:バインドされた要素に新しい指が触れると、イベントがトリガーされます.
touchmove:指がバインドされている要素が常にトリガーされ、トリガー条件から正確には指が移動している場合にのみトリガーされます.しかし、テストを経て、この検出は非常に感度が高く、人為的な指が動かず、システムも細かい移動を検出します.だからずっとトリガーされます.
touchend:バインド要素から指が持ち上がると、一度トリガーされます.
touchcancel:指がスクリーンに触れたときに突然alertが鳴ったり、システム内の他のtouchを中断した動作がトリガーされたりするなど、システムによって実行可能なトリガ(よくないイベント)です.
2.1イベントリスト
移動先の上の3つのタッチイベントには、各イベントに以下のリストがあります.
changedTouches:すべての開始イベントの指情報を保存
targetTouches:現在のオブジェクト上のすべてのタッチポイントのリストを保存します.
touches:現在のタッチスクリーンの指情報をすべて保存
2.1.1イベント属性(読取り専用属性)
移動端はイベント属性の配列要素の属性に触れます:各イベントにはリストがあり、各イベントリストには以下の属性があります.
pageX//ページのX座標に対してclientXとは異なり、左側のスクロール距離も含まれています.もしあれば.
PageY//ページのY座標に対してclientYとは異なり、上をスクロールする距離も含まれています.もしあれば.
ClientX//ビュー領域のX座標に対して、左側のスクロール距離は含まれません.
ClientY//ビュー領域のY座標に対して、上のスクロール距離は含まれません.
スクリーンに対するX座標
スクリーンに対するY座標
identifier//は、Touchオブジェクトごとにユニークなidentifierを表します.このidentifierがあれば、このTouchオブジェクトを常に追跡できることを保証します.
target//指で触れるDOM要素
Touch.radiusX//ユーザとタッチプレーンとの接触面を囲む最小楕円の水平軸(X軸)半径.この値の単位はscreenXと同じです.読み取り専用プロパティ.
Touch.radiusY//ユーザとタッチプレーンとの接触面を囲む最小楕円の垂直軸(Y軸)半径.この値の単位はscreenYと同じです.読み取り専用プロパティ.
Touch.rotationAngle//radiusXとradiusYで記述された正方向の楕円は、この角度値を時計回りに回転させることで、ユーザーとタッチプレーンの接触面を最も正確に覆うことができます.読み取り専用プロパティ.
Touch.force//指押しタッチプレーンの圧力の大きさ、0.0(圧力なし)から1.0(最大圧力)までの浮動小数点数.読み取り専用プロパティ.
var pos={x:e.touches[0].clientX,y:e.touches[0].clientY}/*移動端ドラッグスライド座標を取得*/
const touchY = e.touches[0].clientY - 79;//縦座標を指でドラッグ
例えば、指がドラッグスライドする座標位置を取得するにはeventを直接使用する.ClientXは役に立たないeventを使う.changedTouches[0].クライアントXがいいのですが、
jqueryのeventオブジェクトの場合eventを使用します.originalEvent.changedTouches[0].clientX.
呼び出しイベントメソッド:(1)jqueryメソッド:$(document).bind("touchend", function(e){});(2)javascriptメソッド:document.addEventListener("touchend",function(e){});
三、tap類タッチイベント
タッチイベントは、touchとの違いはまだ分かりませんが、clickイベントの代わりに一般的に使われています.tap longTap singleTap doubleTapの4種類があり、clickイベントの代わりにtapを使うことがあります.
tap:指がスクリーンに触れるとトリガーされます
longTap:指を長く押すと画面がトリガーされます
singleTap:指がスクリーンに触れるとトリガーされます
doubleTap:指で画面をダブルクリックするとトリガーされます
四、swipeスライドイベント
スライドイベントには、swipe swipe Left swipe Right swipe Up swipe Downの5種類があります
swipe:指が画面をスライドするとトリガーされます
swipeLeft:指が画面を左にスライドするとトリガーされます
swipe Right:指が画面を右にスライドするとトリガーされます
swipeUp:指が画面上をスライドするとトリガーされます
swipe Down:指が画面を下にスライドするとトリガーされます
五、gestureジェスチャーイベント
2つの指がスクリーンに触れるとジェスチャーが発生し、ジェスチャーは通常、表示項目のサイズを変更したり、表示項目を回転したりします.ジェスチャーイベントは3つあり、それぞれ以下の通りです.
Gesturestart:1つの指が画面の上に押され、もう1つの指が画面に触れたときにトリガーされます.
Gesturechange:タッチスクリーンのいずれかの指の位置が変化したときにトリガーされます.
Gestureend:いずれかの指が画面上から移動するとトリガーされます.
バインドされた要素に新しい指が触れると、イベントがトリガーされます.
転載先:https://www.cnblogs.com/jing-tian/p/11049705.html