Почему/когда мне нужно дважды нажать, чтобы запустить клик по iOS

Хорошо, я чувствую себя сумасшедшим...

Я смотрю Mobile Safari на iOs 6.0. Кажется, я не могу установить какую-либо рифму или причину, когда при нажатии на элемент будет нажата кнопка. Во многих случаях кажется, что мне нужно нажать один раз, чтобы вызвать зависание, а затем снова вызвать щелчок.

Спецификация Mobile Safari говорит: "... Поток событий, создаваемых жесты одним пальцем и двумя пальцами, зависит от условий независимо от того, является ли выбранный элемент кликабельным или прокручиваемым... Элемент clickable - это ссылка, элемент формы, область карты изображения или любой другой элемент с помощью mousemove, mousedown, mouseup или onclick-обработчиков... Из-за этих различий вы может потребоваться изменить некоторые из ваших элементов на интерактивные элементы..."

Далее предполагается, что разработчик "... Добавить фиктивный обработчик onclick onclick =" void (0) ", так что Safari в iOS распознает элемент span как элемент, который можно использовать для кликов".

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

JsFiddle: http://jsfiddle.net/6Ymcy/1/

HTML

<div id="plain-div" onclick="void(0)">Plain Div</div>

document.getElementById('plain-div').addEventListener('click', function() {
   alert('click'); 
});

Попробуйте нажать элемент на iPad. Ничего не происходит

Но я отвлекся. Для меня важно выяснить следующий вопрос:

Точно, каковы критерии, которые определяют при нажатии на элемент, запускают событие 'click' при первом нажатии? В отличие от запуска события "наведите" на первом касании и 'click' событие на втором кране.

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

Здесь, где я начинаю чувствовать себя сумасшедшим. Я много раз искал в Интернете и почти ничего не знал об этой проблеме. Это только я?! Кто-нибудь знает, где было какое-либо обсуждение критериев для двух нажатий и или подход к решению этих ограничений?

Я рад ответить на вопросы/запросы.

Спасибо!

Ответ 1

У меня была такая же проблема. Самое простое решение - не привязывать событие mouseenter к iOS (или к любой целевой платформе с поддержкой касания). Если это не связано, событие hover не запускается и щелчок запускается при первом нажатии.

Ответ 2

iOS вызовет событие наведения, если элемент "display: none"; в нормальном состоянии и "display: block;" или встроенный блок: hover.

Ответ 3

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

Ответ 4

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

if ((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))){ 
    $('foo').on('mouseup', function(){
        ...
    }
}

Я пробовал другие события, но мышь лучше всего работала. Другие события, такие как touchhend, срабатывали, даже если пользователь пытался прокрутить. Mouseup, похоже, не срабатывает, если вы касаетесь пальцем после касания.

Кредит Дэвид Уолш (и ESPN) для обнаружения iPhone. http://davidwalsh.name/detect-iphone

Ответ 5

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

Функция JQuery hover и нажмите на планшет.

$('clickable_element').live("touchstart",function(e){
    if ($(this).data('clicked_once')) {
        // element has been tapped (hovered), reset 'clicked_once' data flag and return true
        $(this).data('clicked_once', false);
        return true;
    } else {
        // element has not been tapped (hovered) yet, set 'clicked_once' data flag to true
        e.preventDefault();
        $(this).trigger("mouseenter"); //optional: trigger the hover state, as preventDefault(); breaks this.
        $(this).data('clicked_once', true);
    }
});

Ответ 6

Также стоит упомянуть, что псевдокласс класса ": hover" может предотвратить событие 'click' от запуска.

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

Подробнее см. https://css-tricks.com/annoying-mobile-double-tap-link-issue/.

Ответ 7

Дисплей: нет; решение, упомянутое выше, работает на iOS (не тестировалось позднее 9.3.5), но не на Android.

Хакерное решение, основанное на CSS, заключается в том, чтобы скрыть ссылку под элементом с помощью минус-индекса z и привести ссылку вверх к положительному индексу z: hover или first-touch (с небольшой задержкой перехода). Я думаю, можно было бы добиться того же результата, что и css translate вместо z-index. Работает на iOS и Android.

Таким образом вы можете отображать эффект наведения на ссылку на сенсорном устройстве с первым краном, не активируя URL-адрес до второго нажатия.

Ответ 8

Никогда не вычислял критерии, но это решило мою проблему, мгновенно вызывая щелчок, как только элемент постучал:

https://developers.google.com/mobile/articles/fast_buttons

Мне пришлось сделать несколько дополнений/модификаций к их коду, чтобы заставить его работать правильно, сообщите мне, если вы заинтересованы в моем методе, и я попытаюсь опубликовать объяснение.

Приветствия:)

Ответ 9

все это из-за того, что на iOS первое нажатие действует как зависание, второе нажатие действует как щелчок.

вы можете удалить его, добавив этот jQuery script.

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