Обнаружение устройств с сенсорным экраном с помощью Javascript
В Javascript/jQuery, как я могу определить, есть ли на клиентском устройстве мышь?
У меня есть сайт, на котором появляется небольшая информационная панель, когда пользователь наводит указатель мыши на элемент. Я использую jQuery.hoverIntent для обнаружения наведения, но это явно не работает на устройствах с сенсорным экраном, таких как iPhone/iPad/Android. Так что на этих устройствах я хотел бы вернуться к нажатию, чтобы показать информационную панель.
15 ответов
+1 за выполнение hover а также click и то и другое. Другим способом может быть использование медиазапросов CSS и использование некоторых стилей только для небольших экранов / мобильных устройств, которые с наибольшей вероятностью имеют функцию касания / нажатия. Так что, если у вас есть некоторые специфические стили с помощью CSS, и из jQuery вы проверяете эти элементы для свойств стиля мобильного устройства, вы можете подключиться к ним, чтобы написать свой код для мобильного устройства.
Смотрите здесь: http://www.forabeautifulweb.com/blog/about/hardboiled_css3_media_queries/
var isTouchDevice = 'ontouchstart' in document.documentElement;
Примечание. То, что устройство поддерживает сенсорные события, не обязательно означает, что это устройство исключительно с сенсорным экраном. Многие устройства (например, мой Asus Zenbook) поддерживают события как нажатия, так и касания, даже если у них нет реальных механизмов сенсорного ввода. При проектировании для поддержки сенсорного ввода всегда включайте поддержку событий щелчка и никогда не предполагайте, что какое-либо устройство является исключительно одним или другим.
Найдено тестирование для окна.Touch не работает на Android, но это делает:
function is_touch_device() {
return !!('ontouchstart' in window);
}
Смотрите статью: Как лучше всего обнаружить устройство с сенсорным экраном с помощью JavaScript?
if ("ontouchstart" in window || navigator.msMaxTouchPoints) {
isTouch = true;
} else {
isTouch = false;
}
Работает везде!
return (('ontouchstart' in window)
|| (navigator.maxTouchPoints > 0)
|| (navigator.msMaxTouchPoints > 0));
Причина использования maxTouchPoints вместе с msMaxTouchPoints:
Microsoft заявила, что начиная с Internet Explorer 11, версия этого свойства с префиксом поставщика Microsoft (msMaxTouchPoints) может быть удалена и рекомендует вместо этого использовать maxTouchPoints.
Источник: http://ctrlq.org/code/19616-detect-touch-screen-javascript
Я использую:
if(jQuery.support.touch){
alert('Touch enabled');
}
в JQuery Mobile 1.0.1
Для моего первого поста / комментария: мы все знаем, что "touchstart" срабатывает до щелчка. Мы также знаем, что когда пользователь откроет вашу страницу, он или она: 1) переместит мышь 2) нажмет 3) коснется экрана (для прокрутки или...:))
Давайте попробуем что-нибудь:
// -> Начало: jQuery
var hasTouchCapabilities = 'ontouchstart' in window && (navigator.maxTouchPoints || navigator.msMaxTouchPoints);
var isTouchDevice = hasTouchCapabilities ? 'maybe':'nope';
//attach a once called event handler to window
$(window).one('touchstart mousemove click',function(e){
if ( isTouchDevice === 'maybe' && e.type === 'touchstart' )
isTouchDevice = 'yes';
});
//<- End: jQuery
Хорошего дня!
Похоже, что Google Chrome возвращает ложные срабатывания:
var isTouch = 'ontouchstart' in document.documentElement;
Я предполагаю, что это как-то связано с его способностью "эмулировать сенсорные события" (F12 -> настройки в правом нижнем углу -> вкладка "переопределения" -> последний флажок). Я знаю, что по умолчанию он отключен, но именно с этим я связываю изменение результатов (метод "in", используемый для работы в Chrome). Однако, похоже, это работает, насколько я тестировал:
var isTouch = !!("undefined" != typeof document.documentElement.ontouchstart);
Все браузеры, в которых я запускаю этот код в состоянии, typeof является "объектом", но я чувствую себя более уверенно, зная, что это что угодно, но не определено:-)
Протестировано на IE7, IE8, IE9, IE10, Chrome 23.0.1271.64, Chrome для iPad 21.0.1180.80 и iPad Safari. Было бы здорово, если бы кто-то сделал еще несколько тестов и поделился результатами.
Написал это для одного из моих сайтов и, вероятно, является наиболее надежным решением. Тем более, что даже Modernizr может получить ложные срабатывания при обнаружении касания.
Если вы используете JQuery
$(window).one({
mouseover : function(){
Modernizr.touch = false; // Add this line if you have Modernizr
$('html').removeClass('touch').addClass('mouse');
}
});
или просто чистый JS...
window.onmouseover = function(){
window.onmouseover = null;
document.getElementsByTagName("html")[0].className += " mouse";
}
Я протестировал следующий код, упомянутый выше в обсуждении
function is_touch_device() {
return !!('ontouchstart' in window);
}
работает на Android Mozilla, Chrome, Opera, Android-браузер по умолчанию и Safari на iPhone... все положительные...
кажется солидным для меня:)
Полезный пост в блоге на эту тему, связанный с источником Modernizr для обнаружения сенсорных событий. Вывод: невозможно надежно обнаружить устройства с сенсорным экраном из Javascript.
Это работает для меня:
function isTouchDevice(){
return true == ("ontouchstart" in window || window.DocumentTouch && document instanceof DocumentTouch);
}
В jQuery Mobile вы можете просто сделать:
$.support.touch
Не знаю, почему это так недокументировано... но это кроссбраузерно (последние 2 версии браузеров).
Если вы используете Modernizr, он очень прост в использовании Modernizr.touch как уже упоминалось ранее.
Тем не менее, я предпочитаю использовать комбинацию Modernizr.touch и тестирование пользовательского агента, просто чтобы быть в безопасности.
var deviceAgent = navigator.userAgent.toLowerCase();
var isTouchDevice = Modernizr.touch ||
(deviceAgent.match(/(iphone|ipod|ipad)/) ||
deviceAgent.match(/(android)/) ||
deviceAgent.match(/(iemobile)/) ||
deviceAgent.match(/iphone/i) ||
deviceAgent.match(/ipad/i) ||
deviceAgent.match(/ipod/i) ||
deviceAgent.match(/blackberry/i) ||
deviceAgent.match(/bada/i));
if (isTouchDevice) {
//Do something touchy
} else {
//Can't touch this
}
Если вы не используете Modernizr, вы можете просто заменить Modernizr.touch функция выше с ('ontouchstart' in document.documentElement)
Также обратите внимание, что тестирование агента пользователя iemobile предоставит вам более широкий спектр обнаруженных мобильных устройств Microsoft, чем Windows Phone,
Как уже упоминалось, устройство может поддерживать как ввод с помощью мыши, так и сенсорный ввод. Очень часто вопрос не в том, "что поддерживается", а в том, "что используется в настоящее время".
В этом случае вы можете просто зарегистрировать события мыши (включая прослушиватель наведения) и события касания.
element.addEventListener('touchstart',onTouchStartCallback,false);
element.addEventListener('onmousedown',onMouseDownCallback,false);
...
JavaScript должен автоматически вызывать правильный слушатель на основе ввода данных пользователем. Итак, в случае касания,onTouchStartCallback будет запущен, имитируя ваш код наведения.
Обратите внимание, что прикосновение может активировать оба типа слушателей: прикосновение и мышь. Однако слушатель касания идет первым и может предотвратить запуск последующих слушателей мыши, вызвавevent.preventDefault().
function onTouchStartCallback(ev) {
// Call preventDefault() to prevent any further handling
ev.preventDefault();
your code...
}
Дополнительная информация здесь.
Для разработки iPad я использую:
if (window.Touch)
{
alert("touchy touchy");
}
else
{
alert("no touchy touchy");
}
Затем я могу выборочно связываться с событиями на основе касания (например, ontouchstart) или событиями на основе мыши (например, onmousedown). Я еще не тестировал на Android.