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

Question

Давайте предположим, что у меня есть веб-страница, на которой есть некоторое поведение javascript для раскрытия меню (или что-то подобное)

Очевидно, что это не сработает на сенсорном устройстве, таком как iPad или смартфоны.

Как определить, поддерживает ли браузер события hover, такие как onmouseover или onmouseout и псевдотег: hover в CSS?

Примечание. Я знаю, что если яобеспокоенный этим, я должен написать это по-другому, но мне любопытно, можно ли сделать обнаружение.

Редактировать: Когда я говорю "поддерживает парящие события", я действительноозначает, "имеет ли браузер значимое представление событий при наведении курсора".Если аппаратное обеспечение поддерживает это, но программное обеспечение не (или наоборот), нет никакого значимого представления.За исключением некоторых грядущих технологий , я не думаю, что какие-либо сенсорные устройства имеют значимое представление события зависания.

Answer 1

Этот метод перехватывает больше устройств / браузеров

try {
   document.createEvent("TouchEvent");
   alert(true);
}
catch (e) {
   alert(false);
}

Подробнее

Answer 2

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

Просто определите, является ли это сенсорным устройством, а затем сделайте свое специальное дело.Это самый простой подход, так как большинство сенсорных устройств эмулируют события мыши, но ни одно управляемое мышью устройство не эмулирует события касания.

Обновление: Учитывая, сколько устройств сейчас в днях и Johan комментариев я бы порекомендовал просто использовать Modernizr .

Answer 3

Наступил 2016 год, и многие устройства уже несколько лет имеют сенсорные и мышевидные входы. «Can't touch» - это , а не хороший способ оценить «Can mouseover» . Вот лишь несколько примеров:

• Устройства цифрового планшета "Active pen" , такие как телефоны и планшеты Galaxy Note (Android), Microsoft Surface (Windows) и Wacom Cintiq (Mac / Windows / Android), и я верю, что iPad Pro тоже, где ручка работает, как мышь, и может «зависать» на расстоянии около 1 см от экрана
• ноутбуки / гибриды Windows с сенсорными экранами, а также обычные трекпады для ноутбуков и т. Д.
• Сенсорные мониторы, которые можно подключить к любому компьютеру и использовать с мышью

Таким образом, пользователь может быть неспособен навести курсор на одну минуту, а затем, на том же устройстве, не обновляя страницу, он вытаскивает перо из своей Galaxy Note и (при условии, что оно не загорается) внезапно используют hover в своем взаимодействии, и они ожидают, что это будет Just Work.

---

Если вам необходимо знать, может ли ваш пользователь: а) использовать и б) в настоящее время - это , используя устройство, которое позволяет им удобно перемещать вещи, вы может:

• Привязать событие mousemove к вашему документу body, которое активирует состояние "имеет зависание" (например, добавление класса user-can-mouseover к body), если курсор, вызывающий перемещение мыши, перемещается, а затем немедленно отменяет привязку. так бывает только один раз.
• Также связывайте событие touchstart, которое временно деактивирует mousemove и touchend, которое его активирует, так что в браузерах, которые вызывают события мыши при касании (довольно часто встречаются в Android и Windows), обычная сенсорная прокрутка не работает. Вызвать mousemove.
• У события mousemove открепите эти touchstart и touchend события для хорошего ведения хозяйства

Это приведет к тому, что состояние «может зависнуть» будет срабатывать каждый раз, когда пользователь начинает использовать устройство ввода, которое ведет себя как мышь.

---

Например, взять гибридное устройство:

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

... и использование старой рабочей станции с мышью:

1. Страница загружается.
2. Пользователь перемещает мышь, делая что-либо, немедленно вызывая событие перемещения мыши
3. Состояние "зависание может" запускается немедленно

Answer 4

Набор функций, основанный на ответе user568458, который позволяет включать / выключать: стили наведения для сенсорных устройств (я не пробовал это на всех устройствах):

function detectMouseMove() {
    $(document).one('mousemove', function() { 
        $('body').addClass('hoverActive');
        detectTouchEvent();
    });
}
function detectTouchEvent() {
    $(document).one('touchstart', function() { 
        $('body').removeClass('hoverActive');
        detectMouseMove();
    });
}

Тогда вы можете просто использовать .hoverActive в своей таблице стилей перед любым селектором: hover, чтобы мобильные браузеры не пытались отобразить состояние наведения.