javaScript--touch事件詳細解(touchstart、touchmove、touchend)
原文の住所:https://blog.csdn.net/sinat_19327991/articale/details/73823874 HTML 5には多くのイベントが新たに追加されましたが、彼らの互換性の問題はあまり理想的ではないので、実戦性はあまり強くないです.ここでは基本的に省略します.広範で互換性の高いイベントだけを共有して、今後も互換性が向上してから続々と共有します.今日紹介するイベントは主にタッチイベントです.touchstart、touchmove、touchend.
最初にタッチイベントtouchstart、touchmove、touchendはiOS版Safariブラウザです.開発者にいくつかの情報を伝えるために新しく追加されたイベントです.iosデバイスはマウスもキーボードもないので、Safariブラウザを移動するためにインタラクティブページを開発する時、PC端末のマウスとキーボードのイベントは足りません.
iPhone 3 Gsが発表した時に、携帯Safariブラウザを持参して、タッチ操作に関する新しいイベントを提供しました.その後、Android上のブラウザも同じイベントを実現した.タッチイベント(touch)は、ユーザの指をスクリーンの上に置くとき、画面をスライドさせるとき、またはスクリーンから移動するときに出発します.以下、具体的に説明します.
タッチスクリーンに指を触れると触発され、指がスクリーンに置いてあっても触発されます.
touchmoveイベント:指をスクリーン上にスライドさせると連続的にトリガします.このイベントが発生している間は、preventDefault()イベントを呼び出してスクロールを停止することができます.
タッチパッドイベント:指がスクリーンから離れた時にトリガします.
touchcancelイベント:システムがトレースタッチを停止した時にトリガします.この事件の正確な出発時間については、文書には具体的な説明がないので、推測するしかないです.
上のこれらの事件はいずれも泡が発生します.キャンセルしてもいいです.これらのタッチイベントはDOM仕様では定義されていないが、DOM対応で実現されている.したがって、各タッチイベントのイベントオブジェクトは、マウスの実践で一般的な属性を提供しています.bubbles、cancerlable(preventDefaultを使用するかどうか)、イベントに関連するデフォルト動作をキャンセルすることができます.screenX(あるイベントがトリガされたとき、マウスポインタの水平座標)とscreenY(あるイベントがトリガされたときにマウスポインタの垂直座標を返します.)一般的なDOM属性に加えて、タッチイベントには以下の3つのタッチを追跡するための属性が含まれています.
touches:現在トレースされているタッチ操作のtouchオブジェクトの配列を表します.
ターゲットタッチ:イベントターゲットに特定されたタッチオブジェクトの配列.
changeTouches:前回のタッチ以来、何かが変わったTouchオブジェクトの配列を表します.
各タッチオブジェクトに含まれる属性は以下のとおりです.
clientX:タッチターゲットの視座内のx座標.
clientY:タッチターゲットの視座内のy座標です.
identifer:タッチの一意IDを識別します.
PageX:タッチターゲットのページのx座標です.
PageY:タッチターゲットのページのy座標です.
スクリーンのx座標をタッチします.
スクリーンのy座標をタッチします.
タージ:コンタクトのDOMノードターゲット.
上の属性はこのように見るだけで、やはりややこしいです.各属性の話はそんなに細かくて、真刀実銃の例だけがもっとよく分かります.だから、小さい例は次のようです.
function load(){
最初にタッチイベントtouchstart、touchmove、touchendはiOS版Safariブラウザです.開発者にいくつかの情報を伝えるために新しく追加されたイベントです.iosデバイスはマウスもキーボードもないので、Safariブラウザを移動するためにインタラクティブページを開発する時、PC端末のマウスとキーボードのイベントは足りません.
iPhone 3 Gsが発表した時に、携帯Safariブラウザを持参して、タッチ操作に関する新しいイベントを提供しました.その後、Android上のブラウザも同じイベントを実現した.タッチイベント(touch)は、ユーザの指をスクリーンの上に置くとき、画面をスライドさせるとき、またはスクリーンから移動するときに出発します.以下、具体的に説明します.
タッチスクリーンに指を触れると触発され、指がスクリーンに置いてあっても触発されます.
touchmoveイベント:指をスクリーン上にスライドさせると連続的にトリガします.このイベントが発生している間は、preventDefault()イベントを呼び出してスクロールを停止することができます.
タッチパッドイベント:指がスクリーンから離れた時にトリガします.
touchcancelイベント:システムがトレースタッチを停止した時にトリガします.この事件の正確な出発時間については、文書には具体的な説明がないので、推測するしかないです.
上のこれらの事件はいずれも泡が発生します.キャンセルしてもいいです.これらのタッチイベントはDOM仕様では定義されていないが、DOM対応で実現されている.したがって、各タッチイベントのイベントオブジェクトは、マウスの実践で一般的な属性を提供しています.bubbles、cancerlable(preventDefaultを使用するかどうか)、イベントに関連するデフォルト動作をキャンセルすることができます.screenX(あるイベントがトリガされたとき、マウスポインタの水平座標)とscreenY(あるイベントがトリガされたときにマウスポインタの垂直座標を返します.)一般的なDOM属性に加えて、タッチイベントには以下の3つのタッチを追跡するための属性が含まれています.
touches:現在トレースされているタッチ操作のtouchオブジェクトの配列を表します.
ターゲットタッチ:イベントターゲットに特定されたタッチオブジェクトの配列.
changeTouches:前回のタッチ以来、何かが変わったTouchオブジェクトの配列を表します.
各タッチオブジェクトに含まれる属性は以下のとおりです.
clientX:タッチターゲットの視座内のx座標.
clientY:タッチターゲットの視座内のy座標です.
identifer:タッチの一意IDを識別します.
PageX:タッチターゲットのページのx座標です.
PageY:タッチターゲットのページのy座標です.
スクリーンのx座標をタッチします.
スクリーンのy座標をタッチします.
タージ:コンタクトのDOMノードターゲット.
上の属性はこのように見るだけで、やはりややこしいです.各属性の話はそんなに細かくて、真刀実銃の例だけがもっとよく分かります.だから、小さい例は次のようです.
function load(){
document.addEventListener('touchstart',touch, false);
document.addEventListener('touchmove',touch, false);
document.addEventListener('touchend',touch, false);
function touch (event){
var event = event || window.event;
var oInp = document.getElementById("inp");
switch(event.type){
case "touchstart":
oInp.innerHTML = "Touch started (" + event.touches[0].clientX + "," + event.touches[0].clientY + ")";
break;
case "touchend":
oInp.innerHTML = "
Touch end (" + event.changedTouches[0].clientX + "," + event.changedTouches[0].clientY + ")";
break;
case "touchmove":
event.preventDefault();
oInp.innerHTML = "
Touch moved (" + event.touches[0].clientX + "," + event.touches[0].clientY + ")";
break;
}
}