आगे बेहतर समाधान
पहले मैं रिच ब्रैडशॉ के दृष्टिकोण के साथ गया , लेकिन फिर समस्याएं दिखाई देने लगीं। 'टचस्टार्ट' पर e.preventDefault () कर घटना, पृष्ठ अब स्क्रॉल और, न तो देर तक दबाए रखने को क्रियान्वित करने को समाप्त करने में सक्षम है विकल्प मेनू और न ही डबल क्लिक करें ज़ूम आग करने में सक्षम है।
एक समाधान यह पता लगा सकता है कि किस घटना को बुलाया जा रहा है और बाद के एक में ई.पेंटवेंटफॉल्ट () , 'टचेंड' । चूंकि स्क्रॉल का ' टचमव' 'टचेंड' से पहले आता है , इसलिए यह डिफ़ॉल्ट रूप से रहता है, और 'क्लिक' को भी रोका जाता है क्योंकि यह मोबाइल पर लागू होने वाली ईवेंट श्रृंखला में आफ्टरवर्ड आता है, जैसे:
// 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 () और removeClass () को क्रमशः 'टचस्टार्ट' और 'टचेंड' पर उपयोग करें , यह सुनिश्चित करता है कि यह हमेशा शुरू होता है और समाप्त होता है क्रमशः उस पर निर्णय लेने की बजाय जोड़ना और हटाना। समाप्त करने के लिए हम 'फोकसआउट' ईवेंट प्रकार को हटाने वाली कॉलबैक को भी बाध्य करेंगे , किसी भी लिंक के होवर वर्ग को साफ़ करने के लिए ज़िम्मेदार रहना, जो शायद कभी भी फिर से चालू न हो, जैसे:
$('.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: कुछ कीड़े अभी भी दो पिछले समाधानों में पाए जाते हैं और, यह भी सोचते हैं (परीक्षण नहीं किया गया है), डबल क्लिक ज़ूम अभी भी विफल रहता है।
साफ और उम्मीद बग नि: शुल्क (नहीं :)) जावास्क्रिप्ट समाधान
अब , एक दूसरे, क्लीनर, टिडियर और उत्तरदायी के लिए, केवल जावास्क्रिप्ट का उपयोग करके संपर्क करें (.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!
}
});