Обнаружение возможностей браузера и выборочных событий для мыши и касания
Я начал использовать сенсорные события некоторое время теперь, но я просто наткнулся на настоящую проблему. До сих пор я проверил, поддерживаются ли сенсорные возможности и применили выборочные события на основе этого. Как это:
if(document.ontouchmove === undefined){
//apply mouse events
}else{
//apply touch events
}
Однако мои сценарии прекратили работать в Chrome5 (который в настоящее время является бетой) на моем компьютере. Я исследовал его немного, и как я ожидал, в Chrome5 (в противоположность более старому Chrome, Firefox, IE, и т.д.) document.ontouchmove больше не undefined но null.
Сначала я хотел отправить отчет об ошибках, но затем я понял: существуют устройства, которые имеют и мышь и сенсорные возможности, так, чтобы могло бы быть естественным, возможно, Chrome теперь определяет ее, потому что моя ОС могла бы поддерживать оба типа событий.
Так решения кажется легким: Примените ОБА типов событий.Правильно?
Хорошо проблема теперь происходит по мобильному телефону. Чтобы быть обратно совместимыми и поддерживать сценарии, которые только используют события от нажатия мыши, мобильные браузеры могли бы попытаться уволить их также (на касании). Таким образом и с мышью и с сенсорным набором событий, определенный обработчик можно было бы назвать дважды каждый раз.
Что путь состоит в том, чтобы приблизиться к этому? Существует ли лучший способ проверить и применить выборочные события, или я должен проигнорировать проблемы, которые могли бы произойти, если браузеры время от времени запускают и сенсорные и события от нажатия мыши?
3 ответа
Попробуйте создать фиктивный элемент и прикрепить к нему обработчик событий касания, затем проверьте, имеет ли обработчик тип «функция». Это не является надежным, поскольку некоторые браузеры разрешают обработчики событий касания, хотя они работают на устройстве без сенсорного управления, но, вероятно, это так близко, как вы получите. Итак, примерно так:
var hasTouch = function() {
var dummy = document.createElement("div");
dummy.setAttribute("ontouchmove", "return;");
return typeof dummy.ontouchmove == "function" ? true : false;
}
Удачного кодирования!
Попробуйте отключить события мыши, если срабатывают события касания?
Например:
function touch_events() {
document.onmousemove = null;
...
}
function mouse_events() { ... }
document.ontouchmove = touch_events;
document.onmousemove = mouse_events;
Это слишком очевидно?
if(document.ontouchmove !== undefined || document.ontouchmove == null){
//apply touch events
}else{
//apply mouse events
}