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

Question

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

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

Answer 1

Я только что узнал, что это работает, если вы добавляете пустой слушатель, не спрашивайте меня почему, но я протестировал его на iPhone и iPad с iOS 9.3.2, и он работал нормально.

if(/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream){
    var elements = document.getElementsByTagName('a');
    for(var i = 0; i < elements.length; i++){
        elements[i].addEventListener('touchend',function(){});
    }
}

Answer 2

Кажется, этот короткий фрагмент работает.Инициировать событие щелчка, когда ссылка нажата:

  $('a').on('touchstart', function() {
    $(this).trigger('click');
  });

Answer 3

Просто сделайте медиа-запрос CSS, который исключает планшеты и мобильные устройства, и наведите указатель мыши.Вам на самом деле не нужен jQuery или JavaScript для этого.

@media screen and (min-device-width:1024px) {
    your-element:hover {
        /* Do whatever here */
    }
}

И обязательно добавьте это в свою головку html, чтобы убедиться, что она рассчитывается с фактическими пикселями, а не с разрешением.

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />

Answer 4

Я опоздал, я знаю, но это один из самых простых обходных путей, который я нашел:

    $('body').on('touchstart','*',function(){   //listen to touch
        var jQueryElement=$(this);  
        var element = jQueryElement.get(0); // find tapped HTML element
        if(!element.click){
            var eventObj = document.createEvent('MouseEvents');
            eventObj.initEvent('click',true,true);
            element.dispatchEvent(eventObj);
        }
    });

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

Answer 5

Чтобы заставить ссылки работать без прерывания сенсорной прокрутки, я решил это с помощью события «tap» в jQuery Mobile:

    $('a').not('nav.navbar a').on("tap", function () {
        var link = $(this).attr('href');
        if (typeof link !== 'undefined') {
            window.location = link;
        }
    });

Answer 6

Вдохновленный MacFreak, я собрал кое-что, что работает для меня.

Этот метод js предотвращает зависание hover на ipad и предотвращает регистрацию щелчков в виде двух щелчков в некоторых случаях.В CSS, если у вас есть какие-либо псевдо-классы: hover в вашей CSS, измените их на .hover Например .Some-class: hover на .some-class.hover

Проверьте этот код на ipad, чтобы увидеть, какМетод наведения css и js ведет себя по-разному (только в эффекте наведения).У кнопки CSS нет необычного оповещения о клике.http://jsfiddle.net/bensontrent/ctgr6stm/

function clicker(id, doStuff) {
  id.on('touchstart', function(e) {
    id.addClass('hover');
  }).on('touchmove', function(e) {
    id.removeClass('hover');
  }).mouseenter(function(e) {
    id.addClass('hover');
  }).mouseleave(function(e) {
    id.removeClass('hover');
  }).click(function(e) {
    id.removeClass('hover');
    //It's clicked. Do Something
    doStuff(id);
  });
}

function doStuff(id) {
  //Do Stuff
  $('#clicked-alert').fadeIn(function() {
    $(this).fadeOut();
  });
}
clicker($('#unique-id'), doStuff);

button {
  display: block;
  margin: 20px;
  padding: 10px;
  -webkit-appearance: none;
  touch-action: manipulation;
}
.hover {
  background: yellow;
}
.btn:active {
  background: red;
}
.cssonly:hover {
  background: yellow;
}
.cssonly:active {
  background: red;
}
#clicked-alert {
  display: none;
}

<button id="unique-id" class="btn">JS Hover for Mobile devices<span id="clicked-alert"> Clicked</span>

</button>
<button class="cssonly">CSS Only Button</button>
<br>This js method prevents hover from sticking on an ipad, and prevents the click registering as two clicks. In CSS, if you have any :hover in your css, change them to .hover For example .some-class:hover to .some-class.hover

Answer 7

Просто улучшение, позволяющее избежать перенаправления, когда вы по ошибке проводите пальцем по ссылке.

// tablet "one touch (click)" X "hover" > link redirection
$('a').on('touchmove touchend', function(e) {

    // if touchmove>touchend, set the data() for this element to true. then leave touchmove & let touchend fail(data=true) redirection
    if (e.type == 'touchmove') {
        $.data(this, "touchmove_cancel_redirection", true );
        return;
    }

    // if it's a simple touchend, data() for this element doesn't exist.
    if (e.type == 'touchend' && !$.data(this, "touchmove_cancel_redirection")) {
        var el = $(this);
        var link = el.attr('href');
        window.location = link;
    }

    // if touchmove>touchend, to be redirected on a future simple touchend for this element
    $.data(this, "touchmove_cancel_redirection", false );
});

Answer 8

У меня была такая же проблема, но не на сенсорном устройстве. Событие срабатывает при каждом нажатии. Есть что-то в очереди событий или около того.

Однако мое решение было таким: На событие щелчка (или прикосновение?) Вы устанавливаете таймер. Если ссылка снова нажата в течение X мс, вы просто возвращаете false.

Чтобы установить таймер для каждого элемента, вы можете использовать $.data().

Это также может решить проблему @Ferdy, описанную выше.

Answer 9

Если вы используете Modernizr, очень просто использовать Modernizr.touch, как упоминалось ранее.

Однако я предпочитаю использовать комбинацию тестирования Modernizr.touch и пользовательского агента, просто чтобы быть в безопасности.*

var deviceAgent = navigator.userAgent.toLowerCase();

var isTouchDevice = Modernizr.touch || 
(deviceAgent.match(/(iphone|ipod|ipad)/) ||
deviceAgent.match(/(android)/)  || 
deviceAgent.match(/(iemobile)/) || 
deviceAgent.match(/iphone/i) || 
deviceAgent.match(/ipad/i) || 
deviceAgent.match(/ipod/i) || 
deviceAgent.match(/blackberry/i) || 
deviceAgent.match(/bada/i));

function Tipsy(element, options) {
    this.$element = $(element);
    this.options = options;
    this.enabled = !isTouchDevice;
    this.fixTitle();
};

Если вы не используете Modernizr, вы можете просто заменить вышеуказанную функцию Modernizr.touch на ('ontouchstart' in document.documentElement)

Также обратите внимание, что тестирование пользовательского агента iemobile даст вам более широкий диапазон обнаруженныхМобильные устройства Microsoft, чем Windows Phone.

Answer 10

Вы можете использовать click touchend,

пример:

$('a').on('click touchend', function() {
    var linkToAffect = $(this);
    var linkToAffectHref = linkToAffect.attr('href');
    window.location = linkToAffectHref;
});

Приведенный выше пример повлияет на все ссылки на сенсорных устройствах.

Если вы хотите настроить таргетинг только на определенные ссылки, вы можете сделать это, установив для них класс, например:

HTML:

<a href="example.html" class="prevent-extra-click">Prevent extra click on touch device</a>

Jquery:

$('a.prevent-extra-click').on('click touchend', function() {
    var linkToAffect = $(this);
    var linkToAffectHref = linkToAffect.attr('href');
    window.location = linkToAffectHref;
});

Приветствия

Йерун