$ (document).click() не работает корректно на iPhone. JQuery

Эта функция отлично работает на IE, Firefox и Chrome, но на iPhone она работает только при нажатии <img>. Нажатие на страницу (где угодно, но на img) не запускает событие.

$(document).ready(function () {
  $(document).click(function (e) {
    fire(e);
  });
});

function fire(e) { alert('hi'); }

Часть HTML является чрезвычайно простой и не должна быть проблемой.

Любые идеи?

ОТВЕТЫ

Ответ 1

Добавление в следующий код работает.

Проблема заключается в том, что iPhone не вызывает события кликов. Они поднимают "сенсорные" события. Большое спасибо яблоко. Почему они не могут просто держать его стандартным, как все? Во всяком случае, спасибо Нико за подсказку.

Кредит: http://ross.posterous.com/2008/08/19/iphone-touch-events-in-javascript

$(document).ready(function () {
  init();
  $(document).click(function (e) {
    fire(e);
  });
});

function fire(e) { alert('hi'); }

function touchHandler(event)
{
    var touches = event.changedTouches,
        first = touches[0],
        type = "";

    switch(event.type)
    {
       case "touchstart": type = "mousedown"; break;
       case "touchmove":  type = "mousemove"; break;        
       case "touchend":   type = "mouseup"; break;
       default: return;
    }

    //initMouseEvent(type, canBubble, cancelable, view, clickCount, 
    //           screenX, screenY, clientX, clientY, ctrlKey, 
    //           altKey, shiftKey, metaKey, button, relatedTarget);

    var simulatedEvent = document.createEvent("MouseEvent");
    simulatedEvent.initMouseEvent(type, true, true, window, 1, 
                          first.screenX, first.screenY, 
                          first.clientX, first.clientY, false, 
                          false, false, false, 0/*left*/, null);

    first.target.dispatchEvent(simulatedEvent);
    event.preventDefault();
}

function init() 
{
    document.addEventListener("touchstart", touchHandler, true);
    document.addEventListener("touchmove", touchHandler, true);
    document.addEventListener("touchend", touchHandler, true);
    document.addEventListener("touchcancel", touchHandler, true);    
}

Ответ 2

Короткий ответ:

<style>
    .clickable-div 
    {
         cursor: pointer;
    }
</style>

Более длинный ответ:

Важно понимать, что если вы используете только теги <a>, все будет работать так, как ожидалось. Вы можете щелкнуть или перетащить по ошибке на регулярной ссылке <a> на iPhone, и все будет вести себя так, как ожидал пользователь.

Я предполагаю, что у вас есть произвольный HTML, который не доступен для кликов - например, панель, содержащая текст и изображения, которые нельзя обернуть с помощью <a>. Я узнал об этой проблеме, когда у меня была такая панель, которую я хотел полностью кликать.

<div class='clickable-div' data-href="http://www.stackoverflow.com">

 ... clickable content here (images/text) ...

</div>

Чтобы обнаружить клик в любом месте этого div, я использую jQuery с атрибутом data-href html, который показан выше (этот атрибут изобрел сам и не является стандартным атрибутом данных jQuery или HTML).

$(document).on('click', '.clickable-div', function() {

    document.location = $(this).data('href');

});

Это будет работать на вашем настольном браузере, но не на iPad, независимо от того, сколько вы нажимаете.

У вас может возникнуть соблазн изменить обработчик событий с click на click touchstart - и это действительно вызывает обработчик события. Однако, если пользователь хочет перетащить страницу вверх (для прокрутки), они тоже вызовут ее - это ужасный пользовательский интерфейс. [Возможно, вы заметили это поведение с помощью скрытых рекламных баннеров]

Ответ невероятно прост: Просто установите css cursor: pointer.

<style>
    .clickable-div 
    {
         cursor: pointer;
    }
</style>

Это имело дополнительное преимущество для пользователей настольных компьютеров, чтобы указать, что область доступна с помощью значка руки.

Благодаря fooobar.com/questions/63854/...

Ответ 3

Измените это:

$(document).click( function () {

Для этого

$(document).on('click touchstart', function () {

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

Ответ 4

попробуйте это, применимо только к iPhone и iPod, поэтому вы не делаете все, что должно быть синим на chrome или firefox mobile;

/iP/i.test(navigator.userAgent) && $('*').css('cursor', 'pointer');

в принципе, на iOS, по умолчанию не "кликабельны" - они "осязаемы" (pfffff), поэтому вы делаете их "кликабельными", предоставляя им курсор. делает полный смысл, правильно?

Ответ 5

CSS Cursor:Pointer; - отличное решение. FastClick https://github.com/ftlabs/fastclick - это еще одно решение, которое не требует изменения css, если вы не хотите Cursor:Pointer; по элементу по какой-то причине. В любом случае я использую fastclick для устранения задержки 300 мс на устройствах iOS.

Ответ 6

Используйте jQTouch вместо этого - его мобильную версию jQuery

Ответ 7

В мобильном iOS событие клика не пузырится на тело документа и поэтому не может использоваться с событиями .live(). Если вам нужно использовать не родственный элемент с кликом, например div или section, используйте cursor: pointer; в вашем css для не-зависания соответствующего элемента. Если это уродливо, вы можете посмотреть на делегат().