Обнаружение возможностей браузера и выборочных событий для мыши и касания

Question

Я начал использовать сенсорные события некоторое время, но наткнулся на довольно большую проблему. До сих пор я проверял, поддерживаются ли сенсорные возможности, и применял на этом выборочные события. Как это:

if(document.ontouchmove === undefined){
    //apply mouse events
}else{
    //apply touch events
}

Однако на моем компьютере перестали работать мои скрипты в Chrome5 (в настоящее время это бета-версия). Я немного исследовал и, как и ожидал, в Chrome5 (в отличие от более старых Chrome, Firefox, IE и т. Д.) document.ontouchmove больше не undefined, а null.

Сначала я хотел представить отчет об ошибке, но затем я понял: есть устройства, которые имеют как мышь, так и сенсорные возможности, так что это может быть естественным, возможно, Chrome теперь определяет это, потому что моя ОС может поддерживать оба типа событий.

Таким образом, решения кажутся простыми: применять ОБА типы событий. Правильно?

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

Какой способ подойти к этому? Есть ли лучший способ проверить и применить выборочные события, или я должен игнорировать проблемы, которые могут возникнуть, если браузеры время от времени запускают события касания и мыши?

Answer 1

var support_touch = (typeof Touch == "object");

Answer 2

Это слишком очевидно?

if(document.ontouchmove !== undefined || document.ontouchmove == null){
    //apply touch events
}else{
    //apply mouse events
}

Answer 3

Попробуйте отключить события мыши, если сенсорные события срабатывают?

т.д .: </p> <pre> function touch_events() { document.onmousemove = null; ... } function mouse_events() { ... } document.ontouchmove = touch_events; document.onmousemove = mouse_events; </pre> <p>

Answer 4

Попробуйте создать фиктивный элемент и присоединить к нему обработчик сенсорного события, а затем проверьте, относится ли обработчик к типу «функция». Это не является надежной защитой, хотя некоторые браузеры разрешают сенсорные обработчики событий, хотя они работают на не сенсорном устройстве - но это, вероятно, так близко, как вы получите Итак, как-то так:

var hasTouch = function() {
    var dummy = document.createElement("div");
    dummy.setAttribute("ontouchmove", "return;");
    return typeof dummy.ontouchmove == "function" ? true : false;
}

Удачного кодирования!

Answer 5

Неужели Я понял это неправильно, или все посты до сих пор отвечали на вопрос, который вы не задавали? По крайней мере, теперь у вас есть множество альтернативных способов проверки поддерживаемых событий :)

В любом случае, относительно вашего вопроса: Я бы сказал, что это зависит от того, что вы строите. Я предполагаю, что когда вы пишете «примененные селективные события, основанные на этом», вы имеете в виду добавление событий Listeners и -Handlers? Также я предполагаю, что вы не имеете дело с мультитач (пока)?

В общем, если вы хотите, чтобы ваше приложение работало с обоими типами входных событий, у вас не остается выбора, кроме как зарегистрировать прослушиватели для всех этих событий. Возможно, вы уже используете один и тот же обработчик для touchstart и mousedown, так что это место, где я должен убедиться, что фактически обрабатывается только одно из последующих идентичных событий (чтобы сохранить циклы и перерисовки процессора, а также помочь избежать возможных побочных эффектов). ).

Когда дело касается сенсорных устройств, говоря об одном касании, я вижу, что мой телефон уровня 10 (2.3.3) генерирует оба события - события мыши, так что «классический» веб (все эти onmousedown события и т. Д.) ...) будет работать, сенсорные события ... ну, потому что это сенсорное устройство, по-видимому. Но только проверка того, поддерживает ли javascript API TouchEvents, ничего не говорит об устройстве ввода, например: браузер rekonq на рабочем столе kubuntu возвращает true для приведенных выше примеров - но он никогда не сработает, если не используется с сенсорным экраном.

Может быть, более разумным подходом будет разделение устройств через window.navigator.userAgent?

Answer 6

Как и в случае с ответом Олы, я обнаружил, что работает простое обнаружение, но я также обнаружил, что в определенных причудливых устройствах на базе Android (таких как лесной пожар) не всегда определяется это событие - это хорошо работает для меня:

//detect capabilities
this.is_touch_device = ('ontouchstart' in document.documentElement) || (navigator.userAgent.match(/ipad|iphone|android/i) != null);

//if so do somemthing
if (this.is_touch_device) {
    //like publishing a custom event 
}

(возможно, лучший способ сделать это:)