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

Question

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

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

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

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

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

Answer 1

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

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

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

Answer 2

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

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

Read more

Answer 3

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

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

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

---

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

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

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

---

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

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

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

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.