Solusi Lebih Lanjut
Pertama saya menggunakan pendekatan Rich Bradshaw , tetapi kemudian masalah mulai muncul. Dengan melakukan e.preventDefault () pada 'touchstart' acara , halaman tidak lagi menggulung dan, tekan lama tidak dapat mengaktifkan menu opsi atau zoom klik ganda tidak dapat menyelesaikan eksekusi.
Solusinya bisa menemukan acara mana yang dipanggil dan hanya e.preventDefault () di yang kemudian, 'touchend' . Karena scroll 'touchmove' muncul sebelum 'touchend', ia tetap seperti secara default, dan 'klik' juga dicegah karena muncul kata penutup dalam rangkaian peristiwa yang diterapkan ke seluler, seperti:
// 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');
});
Tapi kemudian, ketika menu opsi muncul, itu tidak lagi mengaktifkan 'sentuhan' yang bertanggung jawab untuk mematikan kelas, dan lain kali perilaku hover akan sebaliknya, benar-benar bercampur.
Sebuah solusi kemudian akan, sekali lagi, secara kondisional mencari tahu di acara mana kita berada, atau hanya melakukan yang terpisah, dan menggunakan addClass () dan removeClass () masing-masing pada 'touchstart' dan 'touchend' , memastikan itu selalu dimulai dan diakhiri dengan masing-masing menambah dan menghapus alih-alih memutuskannya secara bersyarat. Untuk menyelesaikannya, kami juga akan mengikat callback penghapusan ke jenis peristiwa 'focusout' , tetap bertanggung jawab untuk menghapus kelas hover link apa pun yang mungkin tetap aktif dan tidak pernah dikunjungi kembali, seperti:
$('.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');
});
Perhatian: Beberapa bug masih terjadi di dua solusi sebelumnya dan, juga berpikir (belum diuji), zoom klik dua kali masih gagal juga.
Rapi dan Semoga Solusi Javascript Bebas Bug (bukan :))
Sekarang , untuk yang kedua, lebih bersih, rapi dan responsif, lakukan pendekatan hanya menggunakan javascript (tidak ada campuran antara kelas .hover dan pseudo: hover) dan dari mana Anda dapat memanggil langsung perilaku ajax Anda pada acara 'klik' universal (seluler dan desktop) , Saya telah menemukan pertanyaan yang dijawab dengan cukup baik yang akhirnya saya mengerti bagaimana saya dapat mencampur peristiwa sentuh dan mouse bersama-sama tanpa beberapa peristiwa panggilan balik pasti mengubah satu sama lain di atas rantai peristiwa. Begini caranya:
$('.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!
}
});