30

以下のコードを使用して、「クリック」または「タッチスタート」イベントをバインドしています（jQueryを使用on(eventType, function() { ... })）。

var what = (navigator.userAgent.match(/iPad/i)) ? 'touchstart' : 'click';

後で：

$foo.on(what, function() { ... });

...これはiPadと「その他すべて」に最適ですが、上記のコードに「iPadトンネルビジョン」があるのではないかと心配しています...

私の質問：

他のすべてのデバイス（Androidタブレットなど）にも同様の名前の「タッチスタート」イベントがありますか？もしそうなら、どうすれば上記のコードを改善して、それらのイベントタイプを説明できるようになりますか？

言い換えれば、上記のコード（iPadだけでなく）でより広い範囲のタッチデバイスをどのように説明できますか？

編集＃1

皆さんはこれについてどう思いますか：

var foo = ('ontouchstart' in window) ? 'touchstart' : ((window.DocumentTouch && document instanceof DocumentTouch) ? 'tap' : 'click');

注：上記のロジックのほとんどは、Modernizrからのものです。

上記はFirefox/iPadで機能するようです...現時点では、他にテストすることはあまりありません。

上記について私が気に入っているのは、私がUAスニッフィングではないということです。:)

tap他のすべてのタッチデバイスのデフォルトとして適切ですか？

編集＃2

これにリンクしているいくつかの興味深い情報がここにあります：

モバイルWebアプリケーション用の高速ボタンの作成

直接的な答えではありませんが、複数のプラットフォームやデバイスでクリック関連のイベントに直面したときに開発者が直面する状況の詳細を詳しく説明しています。

編集＃3

ここにもいくつかの良い情報があります：

AndroidとiPhoneのタッチイベント

AndroidバージョンとiPhoneバージョンのWebKitには、いくつかの共通のタッチイベントがあります。

touchstart - triggered when a touch is initiated. Mouse equivalent - mouseDown
touchmove - triggered when a touch moves. Mouse equivalent - mouseMove
touchend - triggered when a touch ends. Mouse equivalent - mouseUp. This one is a bit special on the iPhone - see below
touchcancel - bit of a mystery

それを読んだ後、私は上記のコードをこれに変更すると思います：

var foo = (('ontouchstart' in window) || (window.DocumentTouch && document instanceof DocumentTouch)) ? 'touchstart' : 'click';

私が最初に質問したとき（iPad / iPhone以外にはアクセスできない）、私touchstartはiOS固有のイベントだと思っていました。これで、タッチデバイスのベースのすべてではないにしてもほとんどをカバーするようtouchstartになります。click

2014年8月の更新：

それが助けになるなら、私はここにいくつかのユーティリティクラスを投稿しました：

  • mhulse / no-x.js：

    [no-js][no-touch] CSSやJSで使用するクラスをjs追加するHTMLテンプレートを挿入するJavaScriptユーティリティ。touch

4

3 に答える 3

14

接触環境にあるかどうかを判断するためにUAを使用しないことを強くお勧めします。

代わりにModernizrを使用してください。http：//modernizr.com/ Windows Phone 7は通常のブラウザータッチイベントを発生させないため、以下のコードはWindowsPhone7以外のものを認識します。ただし、WP8はおそらく正しく認識されます。

if (Modernizr.touch){
   // bind to touchstart, touchmove, etc and watch `event.streamId`
} else {
   // bind to normal click, mousemove, etc
}
于 2012-07-12T07:54:20.647 に答える
12

これはあなたのために働くかもしれません：

var clickEvent = ((document.ontouchstart!==null)?'click':'touchstart');
$("#mylink").on(clickEvent, myClickHandler);
于 2015-08-20T02:31:14.563 に答える
9

iOSとAndroidの両方にタッチイベントがありますが、WindowsはIEでMSPointerイベントを使用します。クロスデバイスソリューションが必要な場合は、pointer.jsを試すか、そこから学びます。

https://github.com/borismus/pointer.js

于 2012-07-16T06:51:24.637 に答える