web-dev-qa-db-ja.com

クリックまたは「タッチ」イベントを決定してバインドする

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

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

後で：

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

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

私の質問：

他のすべてのデバイス（たとえば、Android tablet）には同様の名前の「タッチスタート」イベントがありますか？その場合、これらのイベントタイプを説明できるように上記のコードを改善するにはどうすればよいですか？

言い換えると、上記のコード（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またはtouchクラスを追加するHTMLテンプレートを組み込むJavaScriptユーティリティ。

javascriptandroidjqueryiphonemobile
29
mhulse

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

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

9
Cat Chen

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

代わりにModernizrを使用してください： http://modernizr.com/ 以下のコードは、Windows Phone 7は通常のブラウザのタッチイベント。ただし、WP8はおそらく正しく認識されるでしょう。

if (Modernizr.touch){
   // bind to touchstart, touchmove, etc and watch `event.streamId`
} else {
   // bind to normal click, mousemove, etc
}
13
Konstantin Dinev

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

var clickEvent = ((document.ontouchstart!==null)?'click':'touchstart');
$("#mylink").on(clickEvent, myClickHandler);
12
Sky Yip