2016-01-12 6 views
0

В моем HTML/JS/CSS приложение, внутри $(document).ready(function) я следующий код (копипаст, дословной):touchend не срабатывает на IPad только

$(document).on('mousedown touchstart', '.button', function() { 
    if(!$(this).hasClass('button-disabled')) { 
     $(this).addClass('button-hover'); 
    } 
}).on('mouseup touchend', '.button', function() { 
    $(this).removeClass('button-hover'); 
}); 

Идея заключается в том, чтобы выделить кнопки на MouseDown или touchstart и удалите выделение на mouseup и touchhend. Это прекрасно работает на рабочем столе (osx, linux и windows) во всех браузерах. Это также отлично работает на Android (сенсорный экран) и на iPhone 5S (у меня есть только эта модель). Однако на iPad класс наведения добавляется правильно, но он не удаляется. Когда я отлаживаю приложение на ipad с помощью сафари и устанавливаю точку останова в строке $(this).removeClass('button-hover');, эта точка останова никогда не срабатывает.

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

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

Недостаточно того, что это ошибка в сафари на ipad, я не могу придумать никаких причин, почему это произойдет. Любые предложения будут ценны.

+0

Является ли начало события запущенным mousedown или touchstart? Вы пробовали gesturestart/gestureend? –

+0

@GeorgeHoupis Да, начало запускается правильно. Хотя я не нашел проблемы, я нашел проблему. –

ответ

0

Хорошо, это была не ошибка, а скорее разница в поведении сафари на ipad и других браузерах/платформах.

В другом месте в приложении, я имел

$(document).on('mouseup touchend', '.button', function(e) { 
    ... //some other code 
    e.stopPropagation(); 
    e.preventDefault(); 
}); 

Я предполагаю, сафари выполнял этот обработчик первым и либо stopPropagation или preventDefault на событие вызывало его не выполнить следующий в цепочке. Я удивлен, что это повлияло только на сафари на ipad, и даже на iphone все работало правильно.

Смежные вопросы