Как заставить мою функцию 'click' работать с iOS

У меня есть набор Div, которые действуют как кнопки. Эти кнопки имеют простую функцию jquery click(), которая работает во всех браузерах, кроме iOS.

Например:

<div class="button">click me</div>

$('.button').click(function(){

   alert('hi');

});

Я не уверен, почему это не работает на iOS - очевидно, что в iOS нет "щелчка".

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

Каков ключ к получению этой работы?

Ответ 1

Click": означает, когда событие mousedown и mouseup происходит в одном элементе ИЛИ элемент активируется клавиатурой.

from JQuery Bug, есть работа, просто добавьте "cursor: pointer" к элементу CSS, и событие click будет работать должным образом. и вы даже можете увидеть этот Jquery щелчок на Ios для справки

Ответ 2

Собственно, принятый ответ не помог мне. Я попытался использовать "cursor: pointer", onclick = "" и даже преобразовать элемент в тег привязки.

Что я сделал, чтобы заставить его работать, это связать событие touchstart с событием click. Чтобы заставить его работать на всех платформах, я должен был уродливый ua spoofing вот так:

var ua = navigator.userAgent,
event = (ua.match(/iPad/i) || ua.match(/iPhone/)) ? "touchstart" : "click";

jQuery("body").on(event, '.clickable_element', function(e) {
    // do something here
});

Ответ 3

Основываясь на Marek answer, я беру его на себя (он немного убирается):

var ua = navigator.userAgent, 
pickclick = (ua.match(/iPad/i) || ua.match(/iPhone/)) ? "touchstart" : "click";

$('.clickable_element').on(pickclick, function(e) {
     // do something here
});

В отрасли все еще много работы, когда дело доходит до стандартов...

EDIT:

Не работает на телефонах Android. Принял более жесткий подход:

if (document.documentElement.clientWidth > 1025) { pickclick = 'click' }
if (document.documentElement.clientWidth < 1025) { pickclick = 'touchstart' }

$('.clickable_element').on(pickclick, function(e) {
     // do something here
});

Ответ 4

Вы можете использовать это:

$('button').bind( "touchstart", function(){
    alert('hi');
});

Другое решение - установить курсор элемента в указатель и работать с событием jQuery live и click. Установите его в CSS.

Ответ 5

Также на основе Marek answer, который адаптирует событие к устройству для запуска функции, вот код, который заставляет запускать клик на устройствах iOS, где сначала происходит событие touchstart:

var UA = navigator.userAgent,
iOS = !!(UA.match(/iPad|iPhone/i));

if (iOS) {
   $(document).on('touchstart', function (e) {
       e.target.click();
   });
}