Подальше вдосконалене рішення
Спочатку я пішов із підходом Річ Бредшоу , але потім почали виникати проблеми. Виконуючи e.preventDefault () під час події "touchstart" , сторінка більше не прокручується, і жодне тривале натискання не здатне запускати меню параметрів, а масштаб подвійного клацання не може закінчити виконання.
Рішенням може бути з’ясування того, яка подія викликається, і лише e.preventDefault () у наступній, «touchchend» . Оскільки "touchmove" прокрутки надходить до "touchchend", воно залишається за замовчуванням, а також "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');
});
Але тоді, коли з'явиться меню параметрів, воно більше не спрацьовує "доторкатися", що відповідає за вимкнення класу, і наступного разу поведінка наведення буде навпаки, повністю змішана.
Рішенням тоді буде, знову ж таки, умовно з’ясувати, в якій події ми перебуваємо, або просто робимо окремі, і використовувати addClass () та deleteClass () відповідно на «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 класом і псевдо: зависання) і звідки можна викликати безпосередньо ваша поведінка Ajax на універсальному (мобільний і настільний) «клік» подія , Я знайшов досить добре відповів на запитання, з якого я нарешті зрозумів, як я можу поєднувати події дотику та миші разом без кількох зворотних викликів подій, що неминуче змінюють один одного в ланцюжку подій. Ось як:
$('.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!
}
});