web-dev-qa-db-ja.com

JS / jQueryを使用してブラウザのタッチスタートサポートを確認する方法

ベストプラクティスに従うために、使用しているデバイスに応じて適切なJavaScript/jQueryイベントを使用しようとしています。たとえば、onclickまたはtouchイベントを持つタグを持つモバイルサイトを構築しています。 iPhoneの場合、「タッチスタート」イベントを使用したいと思います。そのハンドラをオブジェクトにバインドする前に、デバイスが「タッチスタート」をサポートしているかどうかをテストしたいと思います。そうでない場合は、代わりに「onclick」をバインドします。

これを行う最良の方法は何ですか？

javascriptjqueryiphonemobileunobtrusive-javascript
53
Alex

イベントがサポートされているかどうかは、次の方法で検出できます。

if ('ontouchstart' in document.documentElement) {
  //...
}

この記事をご覧ください。

そこに公開されているisEventSupported関数は、さまざまなイベントの検出に非常に優れており、クロスブラウザーです。

90
CMS

このコードを使用して、デバイスがタッチをサポートしているかどうかを検出します。

「touchmove」の代わりに「MSPointerDown」イベントを使用するWindows 8 IE10でも動作します。

var supportsTouch = false;
if ('ontouchstart' in window) {
    //iOS & Android
    supportsTouch = true;

} else if(window.navigator.msPointerEnabled) {

    // Windows
    // To test for touch capable hardware 
    if(navigator.msMaxTouchPoints) {
        supportsTouch = true;
    }

}
12
George Filippakos

typeof document.body.ontouchstart == "undefined"通常のdomイベントにフォールバックする

3
antimatter15

この問題の解決策の完全なソースコードを使用して、すべてのブラウザーで動作する完全なデモを作成しました。 Javascriptでタッチスクリーンデバイスを検出 。

1
Manuel Ignacio López Quintero