Daha Gelişmiş Çözüm
Önce Rich Bradshaw'ın yaklaşımıyla gittim ama sonra sorunlar ortaya çıkmaya başladı. E.preventDefault () 'touchstart' üzerinde yaparak olayı, sayfa artık verilirse ve ne uzun basın seçenekler menüsünü ne de çift tıklama zoom ateş edebiliyor yürütme bitirmek edebiliyor.
Bir çözüm, hangi olayın çağrıldığını bulmak olabilir ve e.preventDefault () sonrakinde , 'touchend' olabilir . Spirallerin yana 'touchmove' önce gelir 'touchEnd' varsayılan olarak olarak kalır ve 'tık' de olay zincirinde afterwords geliyor beri engelledi şöyle mobil uygulanır:
// 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');
});
Ancak daha sonra, seçenekler menüsü göründüğünde, artık sınıfın değiştirilmesinden sorumlu 'touchend'i ateşlemiyor ve bir dahaki sefere gezinme davranışı tam tersi olacak, tamamen karışık olacak.
O zaman bir çözüm, koşullu olarak hangi etkinlikte bulunduğumuzu bulmak veya yalnızca ayrı etkinlikler yapmak ve sırasıyla "touchstart" ve "touchend" için addClass () ve removeClass () 'ı kullanarak her zaman başlayıp bitmesini sağlamak olacaktır. Koşullu olarak karar vermek yerine sırasıyla ekleme ve çıkarma. Bitirmek için, geri çağrının kaldırılmasını 'focusout' olay türüne de bağlayacağız, bu şekilde devam eden ve bir daha asla tekrar ziyaret edilmeyen herhangi bir bağlantının üzerine gelme sınıfını temizlemekten sorumlu olmaya devam edeceğiz :
$('.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');
});
atention: Önceki iki çözümde bazı hatalar hala ortaya çıkıyor ve ayrıca düşünün (test edilmedi), çift tıklama yakınlaştırma da hala başarısız oluyor.
Düzenli ve Umarım Hatasız (değil :)) Javascript Çözümü
Şimdi , bir saniye için, sadece javascript kullanarak (.hover sınıfı ve pseudo: hover arasında bir karışım yok) ve evrensel (mobil ve masaüstü) 'tıklama' olayında ajax davranışınızı doğrudan çağırabileceğiniz bir yaklaşımla, daha temiz, daha düzenli ve duyarlı bir yaklaşım , Sonunda dokunma ve fare olaylarını çeşitli olay geri aramaları kaçınılmaz olarak olay zincirinde değiştirmeden nasıl karıştırabileceğimi anladığım oldukça iyi yanıtlanmış bir soru buldum . Bunu nasıl yapacağınız aşağıda açıklanmıştır:
$('.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!
}
});