Игнорировать указатель jQuery (mouseenter, mouseleave) на сенсорных устройствах

Question

Не имея ни мыши, ни указателя, концепция зависания экранных элементов на самом деле неприменима для сенсорных устройств. В то время как многие веб-сайты используют навигацию JavaScript при наведении на события или другие цели, некоторые сенсорные устройства ¹ реализуют mouseenter, который запускается одним нажатием. Если обработчик событий также связан с click, он будет вызван только при втором нажатии на элемент.

Поскольку функция jQuery hover() для внутреннего использования использует mouseenter и mouseleave, элементам с регистрациями hover() и click() требуется два нажатия для запуска последнего ² . Во многих случаях это именно то, что вы хотите, чтобы произошло. Однако в приложениях, где обработка hover() только добавляет акцент (всплывающая подсказка, свечение и т. Д.) К элементу наведения, может иметь смысл пропустить событие, касающееся сенсорных устройств, и сразу перейти к обработчику onclick.

Я знаю, как прослушивать события touchstart и touchend, что позволяет мне адаптировать работу с сенсорным пользователем. Это правильное решение моей проблемы, но я надеюсь, что может быть «проще» обойти это. Я представляю себе метод, похожий на hover() в своей подписи, реализованный только таким образом, который подключает только предоставленные обработчики событий на не сенсорных устройствах.

Есть ли у jQuery такой метод? Есть плагины? Или я что-то здесь упускаю?

---

¹ Подтверждено поведение на iPad, iPhone и нескольких телефонах Android.

² Запустите это JsFiddle demo на настольном компьютере против сенсорного устройства, чтобы увидеть, о чем я говорю.

Answer 1

Мне также всегда интересно, что произойдет с гибридными устройствами, поддерживающими события касания и нажатия / наведения мыши.В этом случае после прикосновения на странице больше не будет событий зависания или щелчка.Что происходит, когда пользователь один раз касается экрана (по какой-либо причине), а затем может захотеть вернуться с помощью мыши или сенсорной панели?Тогда сайт для него не работает (по крайней мере, если он не решит продолжить с касаниями).

Я лично использую сценарий флага ниже и проверяю даже события ввода мыши и выхода из мыши на возможные прикосновения.Я не знаю, хорошая ли это техника.В моем случае это работает вполне нормально.

var touched = false;

$("#someElement")
    .mouseenter( function() {
        if ( !touched ) {
            // some hover action
            // also secure to be in NO WAY triggered on touch device
        };
    }
    .mouseleave( function() {
        if ( !touched ) {
            // some mouse leave reset hover action
            // also secure to be in NO WAY triggered on touch device
        };
    }
    .click( function() {
        if ( !touched ) {
            // do something
            // no double trigger on touch device
        };
    }
    .on( 'touchstart', function() {
        touched = true;
        setTimeout( function() {
            touched = false;
        }, 300 );
        // do touchstart stuff (similar to click or not)
    };

Я не профессиональный кодер.Любым из них предлагается оптимизировать это.На моей веб-странице это, кажется, единственный способ избежать скрытых (двойных) триггеров на сенсорном устройстве (протестировано на iPad).

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

В любом случае, надеюсь, это поможет.

Answer 2

Я рекомендую использовать Modernizr для определения осязания устройства и просто не связывать обработчик наведения, если элемент html не имеет класса «без прикосновения»:

$('selector').click(...)
$('.no-touch selector').hover(...)

проверить http://jsfiddle.net/juYf8/17/