Как определить, поддерживает ли браузер события mouseover?
предположим, у меня есть веб-страница, которая имеет некоторое поведение onmouseover javascript, чтобы выпадающее меню (или что-то подобное)
очевидно, что это не будет работать на сенсорном устройстве, как iPad или смартфонов.
как я могу определить, поддерживает ли браузер события наведения, такие как onmouseover или onmouseout и псевдотег :hover в CSS?
примечание: Я знаю, что если я обеспокоен этим, я должен написать это по-другому, но я любопытно, можно ли это сделать.
Edit: когда я говорю, "поддерживает события наведения", я действительно имею в виду, "имеет ли браузер значимое представление событий наведения". Если аппаратное обеспечение поддерживает его, но программное обеспечение не поддерживает (или наоборот), нет никакого значимого представления. За исключением некоторых предстоящих техника, я не думаю, что какие-либо сенсорные устройства имеют представлением события наведения.
4 ответов
var supportsTouch = (typeof Touch == "object");
просто определить, если это сенсорное устройство, а затем сделать ваши специальные вещи. Это самый простой подход, так как большинство сенсорных устройств эмулируют события мыши, но ни одно устройство, управляемое мышью, не эмулирует события касания.
обновление: учитывая, сколько устройств есть сейчас дней и Йоханкомментарии я бы рекомендовал просто использовать Modernizr.
этот метод ловит больше устройств/браузеров
try {
document.createEvent("TouchEvent");
alert(true);
}
catch (e) {
alert(false);
}
это 2016, и многие устройства имеют как сенсорные, так и мышиные входы в течение нескольких лет. "не трогать" - это не хороший способ судить "Can mouseover". Приведу лишь несколько примеров:
- " активное перо " устройства дигитайзера как Galaxy Note телефоны и планшеты (Android), Microsoft Surface (Windows) и Wacom Cintiq( Mac / Windows / Android), и я считаю, что iPad Pro тоже, где ручка работает как мышь и может " воздух наведите курсор", когда около 1 см от экрана
- Windows для ноутбуков / гибридов с сенсорными экранами плюс и обычной ноутбук трекпады и т. д.
- сенсорные мониторы, которые можно подключить к любому ПК и использовать с помощью мыши
таким образом, пользователь может быть не в состоянии навести одну минуту, а затем, на том же устройстве, не обновляя страницу, они вытаскивают ручку из своей Galaxy Note и (предполагая, что она не загорается) они внезапно are используя парить в их взаимодействие, и они ожидают, что оно просто сработает.
Если вам нужно знать, если ваш пользователь) можете использовать и b) в настоящее время is С помощью устройства, которое позволяет им удобно mousover вещи, вы можете:
- связать
mousemove
событие в документеbody
который активирует состояние "has hover" (например, добавление классаuser-can-mouseover
tobody
) если курсор mousemove-запуска перемещается, а затем немедленно расплетается так, что это происходит только один раз. - и назначить
touchstart
событие, которое временно отключает чтоmousemove
иtouchend
это активирует его, так что в браузерах, которые запускают события мыши на ощупь (довольно распространенные на Android и Windows), обычная прокрутка касания не вызываетmousemove
. - есть
mousemove
событие unbind thesetouchstart
иtouchend
мероприятия для хорошей уборки
это приведет к тому, что состояние "can hover" будет срабатывает каждый раз, когда пользователь начинает использовать устройство ввода, который ведет себя как мышь.
например, принимая гибридное устройство:
- первоначально пользователь просматривает веб-страницы с помощью touch и swipe.
- они достигают вашего приложения, проведите вверх и вниз с помощью касания, понимая, что это такое. До сих пор условие "может парить" не активно.
- они решают, что это один из тех случаев, когда они хотят больше точности, чем их толстые пальцы позволяют, поэтому они вытаскивают ручку дигитайзера или тянутся к своей мыши.
- это заставляет курсор перемещаться по странице без события unended touch, поэтому ваше условие" может зависать " запускается
...и взяв старомодную настольную рабочую станцию с помощью мыши:
- страница загружается.
- пользователь перемещает мышь, делая что-либо, немедленно вызывая перемещение мыши событие
- состояние "can hover" запускается немедленно
набор функций на основе ответа user568458, который позволяет включать /выключать: стили наведения для сенсорных устройств (я не пробовал его на всех устройствах):
function detectMouseMove() {
$(document).one('mousemove', function() {
$('body').addClass('hoverActive');
detectTouchEvent();
});
}
function detectTouchEvent() {
$(document).one('touchstart', function() {
$('body').removeClass('hoverActive');
detectMouseMove();
});
}
затем вы можете просто использовать .hoverActive в таблице стилей перед любым: селекторы наведения, чтобы предотвратить мобильные браузеры от попыток отображения состояния наведения.