JQuery TouchStart в браузере

Question

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

Я хочу что то подобное

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

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

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

Answer 1

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

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

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

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

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

Answer 2

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

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

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

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

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

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

Вы также можете инициировать, используя тот же тип события:

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

Answer 3

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

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

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

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