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

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

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

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

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

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

13
browser-detection html5 javascript onmouseover touch

4 ответов

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

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

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

12

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

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

подробнее

19

это 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 to body) если курсор mousemove-запуска перемещается, а затем немедленно расплетается так, что это происходит только один раз.
  • и назначить touchstart событие, которое временно отключает что mousemove и touchend это активирует его, так что в браузерах, которые запускают события мыши на ощупь (довольно распространенные на Android и Windows), обычная прокрутка касания не вызывает mousemove.
  • есть mousemove событие unbind these touchstart и touchend мероприятия для хорошей уборки

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

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

  1. первоначально пользователь просматривает веб-страницы с помощью touch и swipe.
  2. они достигают вашего приложения, проведите вверх и вниз с помощью касания, понимая, что это такое. До сих пор условие "может парить" не активно.
  3. они решают, что это один из тех случаев, когда они хотят больше точности, чем их толстые пальцы позволяют, поэтому они вытаскивают ручку дигитайзера или тянутся к своей мыши.
  4. это заставляет курсор перемещаться по странице без события unended touch, поэтому ваше условие" может зависать " запускается

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

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

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

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

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

1