web-dev-qa-db-ja.com

ブラウザでのjquery touchstart

Touchstart/touchendは、ほとんどのデスクトップブラウザーでまだサポートされていません。 （すべてのブラウザーでサポートされている）mousedownイベントと同じになるtouchstartイベントを作成するにはどうすればよいですか？.

このようなものが欲しい

$('obj').bind('touchstart', function(e){
});

に翻訳されます

$('obj').bind('mousedown', function(e){
})
jquerytouch-event
18
coure2011

両方を同時にバインドできます...

$('obj').bind('touchstart mousedown', function(e){
});

mousedownイベントを自動的に発生させる場合は、touchstartイベントを自動的に起動します（したがって、touchstartをバインドするだけで済みます）。

$(document).bind('mousedown', function(event) {
    $(event.target).trigger('touchstart');
});

これは、カスタムmousedownイベントがトリガーされる前に、documentイベントがtouchstartに伝播する必要があることに注意してください。これにより、予期しない副作用が発生する可能性があります。

26
alex

次のようなものを試してください：

var clickEventType = ((document.ontouchstart!==null)?'click':'touchstart');

$('obj').bind(clickEventType, function(e){});

さらに良いことに、バインディングには.on（）を使用します。

$('body').on(clickEventType, 'obj', function(e){});

これはドキュメントをチェックして、touchstartが存在するかどうかを確認します。存在する場合、イベントは 'touchstart'で、存在しない場合（ほとんどのデスクトップブラウザー）は 'touch'です。

同じイベントタイプを使用してトリガーすることもできます。

$('obj').trigger(clickEventType);
7
Eric Steinborn

それは最も良い解決策ではありませんが、私が今までに見つけた最善の解決策です。没落？最初のタッチが起こった後でのみ機能するため、同期的に使用することはできません:(

_ var isTouch = false;
 $('body').on('touchstart', function () {
    isTouch = true;
 });
_

たとえば、modernizrを使用して、ブラウザが最初にタッチをサポートしているかどうかを確認することもできます。

グローバルスコープでは使用しないでください（使用する必要がない限り）。また、_isTouch = true_コードの後に​​$('html').addClass('is-touch-device')を追加することで、Htmlタグにis-touch-deviceクラスを追加することで、modernizrに変更することもできます。この場合、どこからでも（cssからも）参照できます。

1
Maciej Paprocki