Подтвердить что ты не робот

Определить и связать событие click или touch

Я использую приведенный ниже код для привязки событий "click" или "touchstart" (используя jQuery on(eventType, function() { ... })).

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

Позже:

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

..., который отлично подходит для iPad и "всего остального", но я обеспокоен тем, что вышеупомянутый код имеет "видение iPad-туннеля"...

Мой вопрос (ы):

Все остальные устройства (например, планшеты Android) аналогично называются событиями "touchstart"? Если да, то как я могу улучшить вышеуказанный код, чтобы я мог учитывать эти типы событий?

Другими словами, как я могу объяснить более широкий диапазон сенсорных устройств в вышеприведенном коде (а не только iPad)?


EDIT # 1

Что вы думаете об этом:

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

Примечание. Большая часть приведенной выше логики от Modernizr здесь.

Вышеприведенное, похоже, работает для Firefox/iPad... В настоящее время мне нечего тестировать.

Что мне нравится в этом, так это то, что я не нюхаю UA.:)

Является ли tap хорошим по умолчанию для всех других сенсорных устройств?


EDIT # 2

Некоторая интересная информация здесь, которая ссылается на это:

Создание быстрых кнопок для мобильных веб-приложений

Не прямой ответ на самом деле, но дает множество подробностей о ситуации, когда разработчики сталкиваются с событиями, связанными с кликом, для нескольких платформ и устройств.


EDIT # 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 года:

Если это поможет, я разместил здесь некоторые полезные классы:

  • mhulse/no-x.js:

    [no-js] [no-touch] Утилиты JavaScript для размещения шаблонов HTML, которые будут добавлять классы js или touch для использования в CSS и/или JS.

4b9b3361

Ответ 1

И iOS и Android имеют события касания, но Windows использует события MSPointer в IE. Если вы хотите использовать решение для нескольких устройств, попробуйте pointer.js или узнайте из него:

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

Ответ 2

Я бы настоятельно рекомендовал против использования UA, чтобы определить, находитесь ли вы в сенсорной среде.

Вместо этого используйте Modernizr: http://modernizr.com/ Приведенный ниже код будет распознавать что угодно, кроме Windows 7 телефона, потому что Windows 7 не запускает обычные события касания браузера. Однако WP8, скорее всего, будет правильно распознан.

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

Ответ 3

Это может сработать для вас:

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