Jquery touchstart в браузере

Так как touchstart/touchhend еще не поддерживается в большинстве настольных браузеров. Как я могу создать событие touchstart, которое будет таким же, как событие mousedown (которое поддерживается во всех браузерах).

Мне нужно что-то вроде этого

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

будет переведен в

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

Ответы

Ответ 1

Вы можете связать оба сразу...

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

Если вы хотите mousedown событие автоматически запускать события touchstart (так что вам нужно только привязать touchstart), используйте...

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

Обратите внимание, что это означает, что события mousedown должны распространяться до document, прежде чем пользовательское событие touchstart может быть запущено. Это может иметь неожиданные побочные эффекты.

Ответ 2

Попробуйте что-то вроде этого:

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

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

Еще лучше, используйте .on() для привязки:

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

Это проверяет документ, чтобы увидеть, существует ли сенсорный старт, если это произойдет, то ваше событие будет "touchstart", если оно не (большинство настольных браузеров), а затем его 'click'.

Вы также можете инициировать использование одного и того же типа событий:

$('obj').trigger(clickEventType);

Ответ 3

Это не самое приятное решение, но лучшее, что я нашел до сих пор. Downfall? Он работает только после первого касания, так что вы не можете использовать синхронно: (

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

Вы также можете проверить, поддерживает ли поддержка браузера сначала, например, с помощью modernizr.

Помните, что не используйте его в глобальной области (если вам не нужно). Вы также можете изменить его так, чтобы он был модернизирован, добавив класс-touch-device в тег Html, добавив после isTouch = true код: $('html').addClass('is-touch-device'). В этом случае вы можете ссылаться на него везде (из css также).