Отключить двойное нажатие, чтобы щелкнуть на сенсорных устройствах iOS

Question

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

Теперь, во-первых, я бы предпочел, чтобы все эти состояния наведения были CSS, но основная проблема, которую я испытываю, заключается в том, что в этих состояниях наведения некоторые элементы меняют display и visibility свойства css. Я сделал некоторое чтение, и, по-видимому, если это так, на сенсорных iOS-устройствах это приводит к тому, что первое нажатие нажимает на зависание, а затем требуется второй щелчок, чтобы на самом деле щелкнуть элемент.

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

Я попытался следующим:

$(document).ready(function() { 
    $('a').on('click touchend', function(e) { 
     var el = $(this); 
     var link = el.attr('href'); 
     window.location = link; 
    }); 
}); 

Однако это имеет проблемы, когда пользователь держит палец вниз на интерактивный элементе, и тащит страницу для прокрутки. Когда они отпускают палец после перетаскивания, window.location по-прежнему изменяется.

При необходимости я добавлю jsFiddle позже.

Заранее спасибо.

EDIT:

Вот jsFiddle, который показывает эту проблему. http://jsfiddle.net/0bj3uxap/4/ Если вы нажмете один из блоков, вы увидите, что он показывает состояние зависания, тогда вам нужно снова нажать, чтобы на самом деле запустить событие щелчка.

Кажется, что когда элемент скрыт, а затем состояние зависания показывает элемент.

Answer 1

Похоже, я нашел решение.

https://github.com/ftlabs/fastclick

Fastclick устраняет эту проблему, и устраняет проблему 300мс задержки с некоторыми мобильными браузерами.

Просто включите библиотеку в <script> теги, а затем запустить его с помощью JQuery, или все, что вы предпочитаете:

$(document).ready(function() { 
    FastClick.attach(document.body); 
}); 

Просто кратко объяснить, почему проблема возникает:

Когда элемент скрытый, например, когда у него есть свойство CSS любого из следующих значений:

display: none; 
opacity: 0; 
visibility: hidden; 

И hov er, а затем показывает элемент, iOS не запускает событие щелчка при первом касании, он заставляет состояние зависания (чтобы показать элемент). Затем пользователю необходимо снова коснуться элемента, чтобы активировать событие клика.

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

Answer 2

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

.error-сообщение

коррекция оказывается, что это CSS используется в нашем пользовательском интерфейсе, и это было связано с событием

наведения мыши