16

以前は、デバイスが JavaScript でタッチ イベントをサポートしているかどうかを検出する場合、次のようなことができました。

var touch_capable = ('ontouchstart' in document.documentElement);

ただし、Google Chrome (17.x.x+) はtrue、基盤となるデバイスがタッチ イベントをサポートしていない場合でも、上記のチェックを返します。たとえば、上記のコードを Windows 7 で実行すると true が返されるため、次のようなものと組み合わせると:

var start_evt = (touch_capable) ? 'ontouchstart' : 'onmousedown';

Google Chrome では、にバインドしているため、イベントが発生することはありませんontouchstart。要するに、これを回避する信頼できる方法を知っている人はいますか? 現在、次のチェックを実行しています。

var touch_capable = ('ontouchstart' in document.documentElement && navigator.userAgent.toLowerCase().indexOf('chrome') == -1)

理想とは程遠い…

4

4 に答える 4

15

正しい答えは、両方のイベント タイプを処理することです。これらは相互に排他的ではありません。

タッチ サポートのより信頼性の高いテストについては、 Modernizrwindow.DocumentTouch && document instanceof DocumentTouchで使用されるテストの 1つも探してください。

さらに良いのは、Modernizr を自分で使用して、機能の検出を行うことです。

ただし、誤検知を防ぐことはできないことに注意してください。したがって、上記の最初の行 -両方をサポートする必要があります。

于 2013-01-21T13:38:56.613 に答える
11

これは、Modernizr がタッチ検出を実行する方法を変更したもので、IE10+ タッチ デバイスで動作するサポートが追加されています。

var isTouchCapable = 'ontouchstart' in window ||
 window.DocumentTouch && document instanceof window.DocumentTouch ||
 navigator.maxTouchPoints > 0 ||
 window.navigator.msMaxTouchPoints > 0;

タッチデバイスを検出することは明らかに不可能であるため、絶対確実ではありません。

あなたのマイレージは異なる場合があります：

  • 古いタッチスクリーン デバイスはマウス イベントのみをエミュレートします
  • 一部のブラウザーと OS セットアップでは、タッチスクリーンが接続されていない場合にタッチ API が有効になる場合があります。たとえば、タッチスクリーン用のドライバーがインストールされているが、タッチ ハードウェアが機能していないか、インストールされていないシステムなどです。
  • ハイブリッド マウス/タッチ/トラックパッド/ペン/キーボード環境では、これはどの入力が使用されているかを示すのではなく、ブラウザーがタッチ ハードウェアの存在を検出するだけです。たとえば、ユーザーはマウスの使用から、タッチ対応ラップトップまたはマウス接続タブレットの画面へのタッチにいつでも切り替えることができます。たとえば、Chrome Dev Tools でモバイル エミュレーション モードを使用している場合など、ブラウザーがタッチ入力を受け入れるかエミュレートできると信じているかどうかのみを検出します。

更新: ヒント: タッチ機能の検出を使用して UI の動作を制御および指定しないでください。代わりにイベント リスナーを使用してください。デバイスではなく、クリック/タッチ/キーアップ イベント用に設計されたタッチ機能検出は、通常、イベント リスナーを追加するための CPU/メモリの消費を節約するために使用されます。タッチ検出が有用で適切な場所の一例:

if (isTouchCapable) {
    document.addEventListener('touchstart', myTouchFunction, false); 
}
于 2015-12-08T01:05:46.663 に答える
1

十分にテストされた（およびクロスブラウザーの）Modernizrのタッチテストの使用を検討する必要があります。

彼らのサイトから：

// bind to mouse events in any case

if (Modernizr.touch){
   // bind to touchstart, touchmove, etc and watch `event.streamId`
}

http://modernizr.github.com/Modernizr/touch.html

于 2013-01-21T13:41:52.517 に答える