Дальнейшее улучшенное решение
Сначала я использовал подход Рича Брэдшоу , но потом начали появляться проблемы. Выполняя e.preventDefault () в событии touchstart , страница больше не прокручивается, и ни долгое нажатие не может вызвать меню параметров, ни масштабирование двойным щелчком не может завершить выполнение.
Решением может быть определение того, какое событие вызывается, и просто e.preventDefault () в последнем, «touchend» . Так как «touchmove» прокрутки идет перед «touchend», он остается таким же по умолчанию, и «щелчок» также запрещен, поскольку он идет после слов в цепочке событий, применяемой к мобильному устройству, например:
// Binding to the '.static_parent' ensuring dynamic ajaxified content
$('.static_parent').on('touchstart touchend', '.link', function (e) {
// If event is 'touchend' then...
if (e.type == 'touchend') {
// Ensuring we event prevent default in all major browsers
e.preventDefault ? e.preventDefault() : e.returnValue = false;
}
// Add class responsible for :hover effect
$(this).toggleClass('hover_effect');
});
Но затем, когда появляется меню опций, оно больше не запускает touchchend, отвечающий за выключение класса, и в следующий раз поведение при наведении будет наоборот, полностью перепутанным.
Решением будет, опять же, условное определение того, в каком событии мы находимся, или просто выполнение отдельных событий , и использование addClass () и removeClass () соответственно для touchstart и touchend , гарантируя, что оно всегда начинается и заканчивается соответственно добавление и удаление вместо условного принятия решения о нем. В завершение мы также свяжем обратный вызов удаления с типом события focusout , оставаясь ответственным за очистку любого класса при наведении курсора ссылки, который может оставаться включенным и никогда больше не посещаться, например так:
$('.static_parent').on('touchstart', '.link', function (e) {
$(this).addClass('hover_effect');
});
$('.static_parent').on('touchend focusout', '.link', function (e) {
// Think double click zoom still fails here
e.preventDefault ? e.preventDefault() : e.returnValue = false;
$(this).removeClass('hover_effect');
});
Внимание: некоторые ошибки все еще возникают в двух предыдущих решениях, и, также думаю (не проверено), масштабирование двойным щелчком по-прежнему не работает.
Аккуратное и, надеюсь, свободное от ошибок (не :)) решение Javascript
Теперь для второго, более чистого, аккуратного и отзывчивого подхода, просто используя javascript (без смешения между классом .hover и псевдо: hover), и откуда вы могли бы напрямую вызывать свое поведение ajax в универсальном (мобильном и настольном) событии click. , Я нашел довольно хорошо ответ на вопрос, из которого я наконец понял, как я могу смешивать события касания и мыши вместе, без того, чтобы несколько обратных вызовов событий неизбежно меняли друг друга в цепочке событий. Вот как:
$('.static_parent').on('touchstart mouseenter', '.link', function (e) {
$(this).addClass('hover_effect');
});
$('.static_parent').on('mouseleave touchmove click', '.link', function (e) {
$(this).removeClass('hover_effect');
// As it's the chain's last event we only prevent it from making HTTP request
if (e.type == 'click') {
e.preventDefault ? e.preventDefault() : e.returnValue = false;
// Ajax behavior here!
}
});