При зависании на iPad / iPhone пользователь дважды щелкает ссылку - PullRequest
Новая
       23

При зависании на iPad / iPhone пользователь дважды щелкает ссылку

118 голосов
/ 14 июня 2010

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

есть ли способ решить эту проблему? может быть, команда jquery, которую я должен использовать вместо mouseover / out и т.д .. спасибо!

Ответы [ 24 ]

0 голосов
/ 08 июля 2016

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

Я использую это: 

var selector = "label, a, button";
var timer;
var startX;
var startY;
$(document).on("click", selector, function (e) {
    if ($(this).data("touched") === true) {
        e.stopImmediatePropagation();
        return false;
    }
    return;
}).on("touchend", selector, function (e) {
    if (Math.abs(startX - e.originalEvent.changedTouches[0].screenX) > 10 || Math.abs(startY - e.originalEvent.changedTouches[0].screenY) > 10)
        // user action is not a tap
        return;
    var $this = $(this);
    // Visit: http://stackoverflow.com/questions/1694595/can-i-call-jquery-click-to-follow-an-a-link-if-i-havent-bound-an-event-hand/12801548#12801548
    this.click();
    // prevents double click
    $this.data("touched", true);
    if (timer)
        clearTimeout(timer);
    setTimeout(function () {
        $this.data("touched", false);
    }, 400);
    e.stopImmediatePropagation();
    return false;
}).on("touchstart", function (e) {
    startX = e.originalEvent.changedTouches[0].screenX;
    startY = e.originalEvent.changedTouches[0].screenY;
});
0 голосов
/ 27 мая 2014

Я столкнулся с подобной ситуацией, когда у меня были события, связанные с состояниями mouseenter / mouseleave / click элемента, но на iPhone пользователю пришлось дважды щелкнуть элемент, чтобы сначала вызвать событие mouseenter, а затем снова запуститьсобытие click.

Я решил эту проблему, используя метод, аналогичный описанному выше, но я использовал плагин jQuery $ .browser (для jQuery 1.9>) и добавил событие .trigger к событию привязки mouseenter, так какследует: 

// mouseenter event
$('.element').on( "mouseenter", function() {
    // insert mouseenter events below

    // double click fix for iOS and mouseenter events
    if ($.browser.iphone || $.browser.ipad) $(this).trigger('click');
});
// mouseleave event
$('.element').on( "mouseleave", function() { 
    // insert mouseout events below
});
// onclick event
$('.element').on( "click", function() {
    // insert click events below
});

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

Вы можете получить плагин jQuery $ .browser здесь: https://github.com/gabceb/jquery-browser-plugin

0 голосов
/ 16 января 2019

Это работает для меня, когда у вас есть JQuery UI выпадающий 

if (navigator.userAgent.match(/(iPod|iPhone|iPad)/)) {
      $('.ui-autocomplete').off('menufocus hover mouseover');
}
0 голосов
/ 14 июня 2010

Вы можете проверить navigator.userAgent следующим образом: 

if(!navigator.userAgent.match(/iPhone/i) || !navigator.userAgent.match(/iPad/i)) {
    //bind your mouseovers...
}

, но вам придется проверять наличие ежевики, дроидов и других сенсорных устройств.Вы также можете привязать указатели мыши только в том случае, если userAgent содержит Mozilla, IE, Webkit или Opera, но вам все равно нужно проверять некоторые устройства, потому что Droid, например, сообщает свою строку userAgent как: 

Mozilla/5.0 (Linux; U; Android 2.0.1; en-us; Droid Build/ESD56) AppleWebKit/530.17 (KHTML, like Gecko) Version/4.0 Mobile Safari/530.17

Строка iPhone похожа.Если вы просто используете iPhone, iPod, iPad, Android и Blackberry, вы можете получить большинство карманных компьютеров, но не все.

Страница:
...