Webフロントエンド開発におけるTouchイベントについて
8700 ワード
現在、モバイルデバイスはますます流行しており、利便性を提供すると同時に、タッチスクリーンも従来のキーボードとマウスの操作に対する束縛から脱し、ヒューマンマシンのインタラクションがより便利になっています.これは、強力で多様なAPPアプリケーションだけでなく、Webアプリケーションもタッチスクリーンの登場でより多彩になっています.例えば、従来のデバイスでは、ユーザはマウス(タッチ版を含む)とキーボードを用いてウェブページを操作し、画像を拡大したり、要素をドラッグしたり、ページをスクロールしたりする.W 3 schoolを参照して、mouseover、mouseout、mousemove、click、foucs、blurなどの一般的なマウスおよびキーボードイベントは、W 3 schoolを参照してください.
しかしながら、タッチスクリーンをサポートするウェブページの開発は、従来の意味でのウェブページとは大きく異なる.マウスhoverイベントでは、例えばページにテーブルがあり、マウスがテーブルのtitleを指すと、近くのどこかでフローティングなtooltipを表示したいと思っています.もちろん、このtooltipが閲覧者の注意を引くことを望んでいるので、DIV要素をカスタマイズし、JavaScriptで動的に表示または非表示にします.このプログラムは簡単で、通常のデバイスの複数の異なるバージョンのブラウザでよく動作しています.しかし、タッチスクリーンをサポートするデバイスでWebページを閲覧するときに問題が発生し、デバイスがマウスをサポートしていないため、ユーザーはマウスでhoverテーブルのtitle要素を使用できません.ユーザーがWebページと対話できる唯一のデバイスは、指で画面に触れたりスライドしたりすることですが、touch friendly以外のWebページで指で従来のmouse hoverイベントをトリガーするのは奇妙で、tooltipが指で画面に触れた瞬間に表示され、すぐに消えてしまうことに気づきます.これは、ブラウザがデフォルトでmouseoverとmouseoutの2つのイベントをトリガーしているためです.この2つのイベントは、指が画面に触れる操作で完了しただけで、制御することはできません.これは多くの異なる小さな例にすぎず、従来のデバイスでマウスで画像ボタンをクリックしてDIVを連続的にスクロールするように動かないなど、さまざまな点がありますが、タッチスクリーンではブラウザが右クリックメニューを表示するためにデフォルトで実行を阻止します.従来の装置では、通常、同じ時間に1つのマウスだけがユーザの操作を受け入れることができるが、タッチスクリーンは一般的に、左右のスライド、2つの拡大縮小、回転など、複数のタッチをサポートし、さまざまなジェスチャーをサポートする.
HTML 5の発展に伴い、タッチスクリーンの操作をサポートするため、複数のブラウザメーカーが独自のブラウザエンジンにtouchをサポートするイベントを多数追加している.しかし、W 3 Cは統一的な基準を提供していないか、ブラウザメーカーによって遵守されている状況も大きく異なるため、ブラウザバージョンに対して特別な処理をしなければなりません.これは私にIEブラウザーが多くの方面で他のブラウザーと違うことを思い出させて、今回も例外ではありません!
ここには、異なるブラウザでtouchイベントをサポートするページがあり、読者はそれらの間にどのような違いがあるのかを見ることができます.
IEブラウザによるtouchイベントのサポート:http://blogs.msdn.com/b/ie/archive/2011/09/20/touch-input-for-ie10-and-metro-style-apps.aspx
Firefoxブラウザによるtouchイベントのサポート:https://developer.mozilla.org/en-US/docs/Web/Guide/Touch_events?redirectlocale=en-US&redirectslug=DOM%2FTouch_events
基本的にはIEブラウザとWebkitカーネルベースのブラウザの2つの陣営があります.
しかし、IE自体は、IE 7、IE 8、IE 9、およびIE 10のような異なるバージョン間の互換性の問題により、いくつかの違いがある.Webkitカーネルベースのブラウザ、Safari、Chromeなどはよく使われています.ここで注意しなければならないのは、SafariがWindowsのDesktopバージョンを提供していることです.このバージョンはAppleが自分のデバイスに提供しているブラウザバージョンとは異なるので、テストを開発する際に区別する必要があります.
では、touchイベントをサポートする一般的なページを開発するにはどうすればいいのでしょうか.基本的に、IEとWebkitカーネルを区別するブラウザだけでいいので、残りの互換性の問題は通常解決しやすいです.MSDNのこのページはIEのポインタと筆勢の事件に対する支持を紹介しましたhttp://msdn.microsoft.com/zh-cn/library/ie/hh673557.aspxポインタイベントのサポートを検出する方法については、IEと他のブラウザを区別するためにこの方法を使用することができます.次のプログラムのクリップを見てください.
コードにはIEとWebkitカーネルのブラウザの2つの主要なブランチがあります.IEブラウザでは、MSPointerDownイベントはマウスイベントを自動的にブロックするのでeventを通過する必要がある.PointerTypeでポインタタイプを判断します.event.pointerTypeは列挙変数で、3つの値があります.
MSPOINTER_TYPE_TOUCH = 2
MSPOINTER_TYPE_PEN = 3
MSPOINTER_TYPE_MOUSE = 4
なぜ値が1の列挙値がないのか不思議です.保留として使われたのかもしれません!つまり、MSPointerDownイベントはトリガと同時にマウス関連のイベントをトリガし、実際にはマウスイベントが最初にトリガされます.そのため,まずポインタタイプを判断し,異なる処理を行う必要がある.ページの互換性を高めるため、マウス操作をサポートするデバイスでもより良い体験ができるようにするため、コードにはMSPointerOverとMSPointerOutイベントがわざわざ追加され、ポインタタイプがMSPOINTER_であると判断した.TYPE_MOUSEでは対応するマウスイベントを実行します.
ここでは、いくつかの互換性について考慮する必要があります.
1. Window.navigator.msPointerEnabled文は、ブラウザがMSPointer関連イベントをサポートしているかどうかを判断するだけで、ユーザーのデバイスがタッチ操作をサポートしているかどうかを判断しません.現在、undefinedはIE 10でのみ返されず、他のバージョンのブラウザではオブジェクトが存在しないとみなされます.ユーザーのデバイスがタッチ操作をサポートしているかどうかを判断するには、Windowを使用します.navigator.msMaxTouchPointsは、オブジェクトが存在し、返された結果が1より大きい場合、デバイスがタッチ操作をサポートし、マルチタッチをサポートしていることを示す.
2. IEでは、MSPointer関連イベントはブラウザのサポート時にのみトリガーされ、ページ要素にマウスイベントがある場合は、マウスイベントも同時にトリガーされます.
3. Webkitカーネルのブラウザはtouchstartイベントをサポートし、MSPointer関連のイベントはこれらのブラウザで無効とみなされます.e.preventDefault()文を使用すると、mouse hoverイベントがトリガーされないようにマウスのデフォルトの動作をブロックできます.
したがって、上記のコードクリップは同時に互換性があります.
もちろん、要素にClick以外のイベントがない場合は、マウスのClickイベントをtouchイベントとして処理することができます.しかし、要素にmouse hover関連のイベントがある場合、ユーザーはtouchと同時にmouse hoverをトリガーします.この場合、cross eventsを処理するために上記の論理を使用することを考慮することができます.
touch friendly webpageの開発についてはまだ多くの研究に値するものがあります.タッチスクリーンのデバイスもこの2年で興ったもので、Webアプリケーションは開発コストにおいてもプラットフォーム間互換性においてもAPPより優れています.また、touch(タッチ)のほか、gestures(ジェスチャー)の操作も非常に重用されています.結局、ユーザーがいつまでも指でページを操作したくないのではないでしょうか.ここでMSDNの記事では、IEでジェスチャーを使ってページを操作する方法について説明していますが、後でページにgesturesイベントを追加する方法について説明します.
http://msdn.microsoft.com/en-us/library/windows/apps/jj150607.aspx
また皆さんと一緒にpointerを共有したいと思います.jsは、現在よく行われている各ブラウザバージョンtouchイベントと互換性のあるフレームワークであるはずですが、まだ完備しており、テスト時にイベントが正しくトリガーされない場合もあります.GENARALIZED INPUT ON THE CROSS-DEVICE WEBという文章も学ぶ価値があります.
しかしながら、タッチスクリーンをサポートするウェブページの開発は、従来の意味でのウェブページとは大きく異なる.マウスhoverイベントでは、例えばページにテーブルがあり、マウスがテーブルのtitleを指すと、近くのどこかでフローティングなtooltipを表示したいと思っています.もちろん、このtooltipが閲覧者の注意を引くことを望んでいるので、DIV要素をカスタマイズし、JavaScriptで動的に表示または非表示にします.このプログラムは簡単で、通常のデバイスの複数の異なるバージョンのブラウザでよく動作しています.しかし、タッチスクリーンをサポートするデバイスでWebページを閲覧するときに問題が発生し、デバイスがマウスをサポートしていないため、ユーザーはマウスでhoverテーブルのtitle要素を使用できません.ユーザーがWebページと対話できる唯一のデバイスは、指で画面に触れたりスライドしたりすることですが、touch friendly以外のWebページで指で従来のmouse hoverイベントをトリガーするのは奇妙で、tooltipが指で画面に触れた瞬間に表示され、すぐに消えてしまうことに気づきます.これは、ブラウザがデフォルトでmouseoverとmouseoutの2つのイベントをトリガーしているためです.この2つのイベントは、指が画面に触れる操作で完了しただけで、制御することはできません.これは多くの異なる小さな例にすぎず、従来のデバイスでマウスで画像ボタンをクリックしてDIVを連続的にスクロールするように動かないなど、さまざまな点がありますが、タッチスクリーンではブラウザが右クリックメニューを表示するためにデフォルトで実行を阻止します.従来の装置では、通常、同じ時間に1つのマウスだけがユーザの操作を受け入れることができるが、タッチスクリーンは一般的に、左右のスライド、2つの拡大縮小、回転など、複数のタッチをサポートし、さまざまなジェスチャーをサポートする.
HTML 5の発展に伴い、タッチスクリーンの操作をサポートするため、複数のブラウザメーカーが独自のブラウザエンジンにtouchをサポートするイベントを多数追加している.しかし、W 3 Cは統一的な基準を提供していないか、ブラウザメーカーによって遵守されている状況も大きく異なるため、ブラウザバージョンに対して特別な処理をしなければなりません.これは私にIEブラウザーが多くの方面で他のブラウザーと違うことを思い出させて、今回も例外ではありません!
ここには、異なるブラウザでtouchイベントをサポートするページがあり、読者はそれらの間にどのような違いがあるのかを見ることができます.
IEブラウザによるtouchイベントのサポート:http://blogs.msdn.com/b/ie/archive/2011/09/20/touch-input-for-ie10-and-metro-style-apps.aspx
Firefoxブラウザによるtouchイベントのサポート:https://developer.mozilla.org/en-US/docs/Web/Guide/Touch_events?redirectlocale=en-US&redirectslug=DOM%2FTouch_events
基本的にはIEブラウザとWebkitカーネルベースのブラウザの2つの陣営があります.
しかし、IE自体は、IE 7、IE 8、IE 9、およびIE 10のような異なるバージョン間の互換性の問題により、いくつかの違いがある.Webkitカーネルベースのブラウザ、Safari、Chromeなどはよく使われています.ここで注意しなければならないのは、SafariがWindowsのDesktopバージョンを提供していることです.このバージョンはAppleが自分のデバイスに提供しているブラウザバージョンとは異なるので、テストを開発する際に区別する必要があります.
では、touchイベントをサポートする一般的なページを開発するにはどうすればいいのでしょうか.基本的に、IEとWebkitカーネルを区別するブラウザだけでいいので、残りの互換性の問題は通常解決しやすいです.MSDNのこのページはIEのポインタと筆勢の事件に対する支持を紹介しましたhttp://msdn.microsoft.com/zh-cn/library/ie/hh673557.aspxポインタイベントのサポートを検出する方法については、IEと他のブラウザを区別するためにこの方法を使用することができます.次のプログラムのクリップを見てください.
if (window.navigator.msPointerEnabled) {
/*Events for IE only*/
document.getElementById("id0").addEventListener("MSPointerOver", function (e) {
/*Add mouse over event for touch*/
if (e.pointerType == e.MSPOINTER_TYPE_MOUSE) {
methods.onMouseOver(this, e);
}
});
document.getElementById("id0").addEventListener("MSPointerOut", function (e) {
/*Add mouse out event for touch*/
if (e.pointerType == e.MSPOINTER_TYPE_MOUSE) {
methods.onMouseOut(this, e);
}
});
document.getElementById("id0").addEventListener("MSPointerDown", function (e) {
if (e.pointerType == e.MSPOINTER_TYPE_TOUCH) {
/*Do something for touch input only*/
methods.onTouchInput(this.parentNode);
}
else {
/*Do something for non-touch input*/
methods.onMouseClick(this.parentNode);
}
});
}
else {
/*Events for non-IE or IE without msPointerEnabled*/
$(this).bind("touchstart", function (e) {
e.preventDefault();
methods.onMouseClick(this.parentNode);
methods.onMouseOver(this, e);
});
/*Common Mouse events: mouseover, mouseout, click*/
$(this).click(function () { methods.onMouseClick(this); });
$(this).hover(
function (e) {
methods.onMouseOver(this, e);
},
function (e) { methods.onMouseOut(this, e); });
}コードにはIEとWebkitカーネルのブラウザの2つの主要なブランチがあります.IEブラウザでは、MSPointerDownイベントはマウスイベントを自動的にブロックするのでeventを通過する必要がある.PointerTypeでポインタタイプを判断します.event.pointerTypeは列挙変数で、3つの値があります.
MSPOINTER_TYPE_TOUCH = 2
MSPOINTER_TYPE_PEN = 3
MSPOINTER_TYPE_MOUSE = 4
なぜ値が1の列挙値がないのか不思議です.保留として使われたのかもしれません!つまり、MSPointerDownイベントはトリガと同時にマウス関連のイベントをトリガし、実際にはマウスイベントが最初にトリガされます.そのため,まずポインタタイプを判断し,異なる処理を行う必要がある.ページの互換性を高めるため、マウス操作をサポートするデバイスでもより良い体験ができるようにするため、コードにはMSPointerOverとMSPointerOutイベントがわざわざ追加され、ポインタタイプがMSPOINTER_であると判断した.TYPE_MOUSEでは対応するマウスイベントを実行します.
ここでは、いくつかの互換性について考慮する必要があります.
1. Window.navigator.msPointerEnabled文は、ブラウザがMSPointer関連イベントをサポートしているかどうかを判断するだけで、ユーザーのデバイスがタッチ操作をサポートしているかどうかを判断しません.現在、undefinedはIE 10でのみ返されず、他のバージョンのブラウザではオブジェクトが存在しないとみなされます.ユーザーのデバイスがタッチ操作をサポートしているかどうかを判断するには、Windowを使用します.navigator.msMaxTouchPointsは、オブジェクトが存在し、返された結果が1より大きい場合、デバイスがタッチ操作をサポートし、マルチタッチをサポートしていることを示す.
2. IEでは、MSPointer関連イベントはブラウザのサポート時にのみトリガーされ、ページ要素にマウスイベントがある場合は、マウスイベントも同時にトリガーされます.
3. Webkitカーネルのブラウザはtouchstartイベントをサポートし、MSPointer関連のイベントはこれらのブラウザで無効とみなされます.e.preventDefault()文を使用すると、mouse hoverイベントがトリガーされないようにマウスのデフォルトの動作をブロックできます.
したがって、上記のコードクリップは同時に互換性があります.
もちろん、要素にClick以外のイベントがない場合は、マウスのClickイベントをtouchイベントとして処理することができます.しかし、要素にmouse hover関連のイベントがある場合、ユーザーはtouchと同時にmouse hoverをトリガーします.この場合、cross eventsを処理するために上記の論理を使用することを考慮することができます.
touch friendly webpageの開発についてはまだ多くの研究に値するものがあります.タッチスクリーンのデバイスもこの2年で興ったもので、Webアプリケーションは開発コストにおいてもプラットフォーム間互換性においてもAPPより優れています.また、touch(タッチ)のほか、gestures(ジェスチャー)の操作も非常に重用されています.結局、ユーザーがいつまでも指でページを操作したくないのではないでしょうか.ここでMSDNの記事では、IEでジェスチャーを使ってページを操作する方法について説明していますが、後でページにgesturesイベントを追加する方法について説明します.
http://msdn.microsoft.com/en-us/library/windows/apps/jj150607.aspx
また皆さんと一緒にpointerを共有したいと思います.jsは、現在よく行われている各ブラウザバージョンtouchイベントと互換性のあるフレームワークであるはずですが、まだ完備しており、テスト時にイベントが正しくトリガーされない場合もあります.GENARALIZED INPUT ON THE CROSS-DEVICE WEBという文章も学ぶ価値があります.