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

Ответ 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, чтобы предотвратить попытки мобильных браузеров отображать состояние зависания.