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

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

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

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

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

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

Ответ 1

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

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

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

Ответ 2

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

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

Подробнее

Ответ 3

Это 2016 год, и множество устройств имеют сенсорные и мышиные входы в течение нескольких лет. "Нельзя трогать" - это не очень хороший способ судить "Can mouseover" . Чтобы привести несколько примеров:

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

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

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

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

Это приведет к тому, что состояние "can hover" будет запущено в любое время, когда пользователь начнет использовать устройство ввода, которое ведет себя как мышь.

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

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

... и используя рабочую станцию для настольных компьютеров старой школы с помощью мыши:

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

Ответ 4

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

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

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