Дальнейшее улучшенное решение
Сначала я выбрал подход Рича Брэдшоу , но затем начали появляться проблемы. Выполняя событие e.preventDefault () для 'touchstart' , страница больше не прокручивается и ни длительное нажатие не может вызвать меню параметров, ни увеличение двойным щелчком не может закончить выполнение.
Решением может быть выяснение, какое событие вызывается, и просто e.preventDefault () в последующем, 'touchend' . Поскольку прокрутка 'touchmove' предшествует 'touchend' , она остается по умолчанию, и 'click' также запрещается, поскольку она идет после слов в примененной цепочке событий на мобильный, вот так:
// 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');
});
Но затем, когда появляется меню опций, оно больше не вызывает 'touchend' , отвечающее за отключение класса, и в следующий раз поведение при наведении будет наоборот, полностью перепутано.
Тогда решением, опять же, будет условное определение того, в каком событии мы находимся, или просто выполнение отдельных событий, и использование 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 Solution
Теперь для второго, более чистого, аккуратного и отзывчивого подхода, использующего только javascript (без сочетания классов .hover и pseudo: 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!
}
});