В Javascript/jQuery, как я могу определить, есть ли на клиентском устройстве мышь?
У меня есть сайт, который сместит небольшую информационную панель, когда пользователь наводит курсор мыши на элемент. Я использую jQuery.hoverIntent для обнаружения зависания, но это явно не работает на устройствах с сенсорным экраном, таких как iPhone/iPad/Android. Поэтому на этих устройствах я бы хотел вернуться, чтобы отобразить панель информации.
+1 для выполнения hover и click обоих. Другим способом может быть использование запросов в формате CSS и использование некоторых стилей только для небольших экранов/мобильных устройств, которые, скорее всего, будут иметь сенсорные функции. Поэтому, если у вас есть определенные стили с помощью CSS, и из jQuery вы проверяете эти элементы для свойств стиля мобильного устройства, вы можете подключиться к ним, чтобы написать свой мобильный код.
Смотрите здесь: http://www.forabeautifulweb.com/blog/about/hardboiled_css3_media_queries/
var isTouchDevice = 'ontouchstart' in document.documentElement;
Примечание. Просто потому, что устройство поддерживает события касания, не обязательно означает, что оно является исключительно сенсорным экраном. Многие устройства (такие как мой Asus Zenbook) поддерживают как нажатия, так и сенсорные события, даже если у них нет реальных механизмов ввода касаний. При проектировании для поддержки касаний всегда включайте поддержку событий по событию и никогда не предполагайте, что какое-либо устройство является исключительно одним или другим.
Найдено тестирование для window.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
Google Chrome, кажется, возвращает ложные срабатывания на этом:
var isTouch = 'ontouchstart' in document.documentElement;
Я полагаю, что это имеет какое-то отношение к его способности "эмулировать события касания" (F12 → настройки в нижнем правом углу → "переопределяет" вкладку → последний флажок). Я знаю, что он отключен по умолчанию, но то, что я связываю с изменением результатов с (метод "in", используемый для работы в Chrome). Однако, похоже, это работает, насколько я проверял:
var isTouch = !!("undefined" != typeof document.documentElement.ontouchstart);
Во всех браузерах, в которых я запускал этот код, состояние typeof является "объектом", но я уверен, что знаю, что это все, кроме undefined: -)
Протестировано на 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 и сафари на iphone... все положительные...
кажется солидным для меня:)
Полезное сообщение в блоге по теме, связанное с источником Modernizr для обнаружения событий касания. Вывод: невозможно надежно обнаружить сенсорные устройства из Javascript.
Это работает для меня:
function isTouchDevice(){
return true == ("ontouchstart" in window || window.DocumentTouch && document instanceof DocumentTouch);
}
В jQuery Mobile вы можете просто:
$.support.touch
Не знаю, почему это недокументировано, но это безопасно для кроссбраузеров (последние 2 версии текущих браузеров).
Для моего первого сообщения/комментария: Мы все знаем, что перед нажатием кнопки запускается "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
Приятного дня!
Для разработки iPad я использую:
if (window.Touch)
{
alert("touchy touchy");
}
else
{
alert("no touchy touchy");
}
Затем я могу выборочно привязываться к событиям на основе касания (например, ontouchstart) или событиям на основе мыши (например, onmousedown). Я еще не тестировал на Android.
Если вы используете 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.