हम कैसे: iOS पर होवर जीते ...

किसी के लिए, मुझे लगता है कि यह कोई रहस्य नहीं है कि टच डिवाइस माउस घटनाओं को थोड़े अलग तरीके से संभालते हैं, जैसे कि वे डेस्कटॉप ब्राउज़र पर नहीं करते हैं ...

मेरे लिए सबसे हड़ताली उदाहरण छद्म वर्ग संभाल रहा है :hover । शुरुआत के लिए, iOS7, उदाहरण के लिए, होवर का जवाब नहीं देगा जब तक कि क्लिक इवेंट तत्व या उसके माता-पिता से जुड़ा न हो। यह यहाँ इस उदाहरण में स्पष्ट रूप से देखा गया है: jsfiddle.net/H8EmG - चाहे आप पाठ में कितनी भी ऊँगली डालें - आपको कोई अंडरस्कोर नहीं दिखेगा। और इस उदाहरण में, jsfiddle.net/H8EmG/1 टेक्स्ट में एक उंगली को "पोक" करने से उसकी अंडरलाइनिंग हो जाएगी। एक दिलचस्प तथ्य - जब तक हम किसी अन्य तत्व में नहीं झांकेंगे, तब तक पाठ एक होवर के नीचे रहेगा ...

एक और दिलचस्प उदाहरण मंडराने वाले तत्वों को संभाल रहा है: jsfiddle.net/ASRm9/1 पाठ पर क्लिक करने का प्रयास करें। सबसे पहले आप लाइन के अंदर "HOVER!" टेक्स्ट देखेंगे, लेकिन दूसरा प्रेस पहले ही alert('click') ट्रिगर कर देगा alert('click') । ऐसा इसलिए है क्योंकि iOS समझता है कि क्या :hover छिपा हुआ है, और साइट के निर्माता द्वारा घुसपैठ किए गए व्यवहार को नहीं तोड़ने की कोशिश करता है।

लेकिन एक बार हमें ऐसी बग का सामना करना पड़ा, जिसे हम अब तक नहीं समझा सके हैं, और इसे स्थानीय बनाने के लिए iPad पर डिबगिंग के एक दिन से अधिक समय लगा है ... विवरण चाहते हैं, साथ ही एक चतुर, जैसा कि मुझे लगता है, हल करने का तरीका, संभवतः, सभी समस्याओं के साथ: मंडराना एक बार - कृपया, बिल्ली के नीचे ...



SUDDENLY, अगले सेवा अद्यतन के बाद, "प्लेटफ़ॉर्म" का डेवलपर, जिसमें से मैं एक अप्रिय समस्या है, का पता चला - iPad पर आप लगभग सभी "तालिकाओं" में एक पंक्ति का चयन नहीं कर सकते जो सेवा पर हैं। "क्लिक" बस काम नहीं करता है! यह ध्यान दिया जाना चाहिए कि "तालिका" केवल पंक्तियाँ और स्तंभ नहीं हैं। हमारे मामले में, यह नोट्स, सॉर्टिंग, ग्रुपिंग, फिल्टर के साथ एक "समृद्ध" यूआई तत्व है, सभी प्रकार के "लैडर" मुद्रित और पीडीएफ और एक्सेल को निर्यात किए जाते हैं ...

समस्या के लंबे और थकाऊ स्थानीयकरण के बाद, हमने HTML + CSS का एक अलग, सरल टुकड़ा पर प्रकाश डाला, जिसने इसी तरह के परिणाम दिए ...

• HTML तालिका, कई पंक्तियाँ, कई कॉलम
• स्तंभों में से एक में एक "चेकबॉक्स" है - एक div जो डिफ़ॉल्ट रूप से छिपा हुआ है और जब आप एक पंक्ति में होवर करते हैं तो दिखाया जाता है। के माध्यम से कार्यान्वित :hover
• एक लाइन पर click
• एक तालिका इसके कंटेनर से बड़ी है
• कंटेनर का एक निश्चित आकार है और इसमें overflow: scroll सक्षम है overflow: scroll

यहाँ एक उदाहरण है: jsfiddle.net/822eG/4 । तालिका की पंक्तियों पर क्लिक करने का प्रयास करें। होवर काम करेगा (आप "चेकबॉक्स" देखेंगे) लेकिन click (और alert ) आप यह नहीं देखेंगे कि लाइनों पर click करने का प्रयास कैसे नहीं किया जाएगा।

इस विषय पर, मैंने SO SOoveroverflow.com/questions/21786375/ios-7-hover-click-issue-no-click-triggered-in-some-cases पर एक पोस्ट शुरू की, जिसमें शामिल करने के लिए ऑफ़र को छोड़कर, बहुत लाभ नहीं हुआ (यह स्पष्ट नहीं है कि क्यों) ) -webkit-overflow-scrolling: touch टेबलेट कंटेनर पर -webkit-overflow-scrolling: touch जो वास्तव में jsField से उदाहरण के साथ मदद करता है, लेकिन वास्तविक एप्लिकेशन पर मदद नहीं करता है।

इस गड़बड़ी पर सोचने की प्रक्रिया में, निम्नलिखित समाधान आया (एसओ पर सवाल का अपना जवाब) - क्या होगा यदि :hover सीएसएस वर्ग :hover बदल दिया जाता है जो कोड के साथ "लिपटे" होता है, mouseenter / mouseleave को पकड़ता है? यह सरल फिक्स वास्तव में सब कुछ हल करता है। यहां तक ​​कि "मज़ा" काम करना शुरू कर देता है - कोई और डबल-क्लिकिंग नहीं। पहले प्रेस से हमें अलर्ट और "चेकबॉक्स" दोनों मिलते हैं: jsfiddle.net/822eG/10

एक बेहतर विकल्प की कमी के लिए, उन्होंने इस पर विचार करना शुरू कर दिया ... वास्तव में, हमारे पास एक बहुत बड़ा कोड आधार है। इस प्लेटफ़ॉर्म पर आधारित "प्लेटफ़ॉर्म" कोड और "एप्लिकेशन" कोड दोनों की एक बहुत कुछ है। और कौन जानता है, कौन, कहाँ और कब, किन शर्तों के तहत वह उपयोग करना चाहता है: मंडराना और क्या वह कुछ छिपाना चाहता है या कुछ दिखाना चाहता है। सामान्य तौर पर, आपको "सब कुछ अपने आप से" होना चाहिए और औसत डेवलपर ने iOS पर समस्याओं के बारे में नहीं सोचा।

परिणाम निम्नलिखित समाधान था:

• MutationObserver (जो iOS 6-7 में उपलब्ध है) का उपयोग करते हुए, हम दस्तावेज़ के head में link टैग के सम्मिलन की निगरानी करते हैं - हम इसे बर्दाश्त कर सकते हैं, क्योंकि सभी शैलियों को हम जानबूझकर आवश्यकता से जोड़ते हैं। जेएस और सफारी में यह एक नई link होने की गारंटी है
• नए link जोड़ते समय link document.styleSheets और उनका विश्लेषण करें ...
• हम सभी नियमों के माध्यम से हल करेंगे और उनमें से उन का चयन करेंगे जिनमें चयनकर्ता है :hover
• आइए ऐसे चयनकर्ताओं के लिए शैलियों को देखें, यह देखने के लिए जांचें कि क्या कोई display अलग none और visibility से अलग है
• यदि कोई हो, तो हम चयनकर्ता को फिर से लिखेंगे, प्रतिस्थापित करेंगे :hover साथ :hover करें (यानी, एक नियमित कक्षा के साथ एक छद्म वर्ग) ...
• और प्रतिनिधि के माध्यम से शरीर पर हम पाए गए चयनकर्ता के लिए mouseenter / mouseleave mouseenter , इसके ठीक पहले वाले हिस्से के लिए और अधिक सटीक :hover

सौभाग्य से, यह काफी सरल निकला ... प्रत्येक styleSheet में rules का एक संग्रह होता rules , जिसमें स्वयं नियम शामिल होते हैं। प्रत्येक नियम में एक selectorText संपत्ति होती है जिसे चलते समय बदला जा सकता है। इसका एक style संग्रह भी है जहां, सबसे पहले, इसमें इस शैली में परिभाषित गुणों का एक सेट होता है - उन्हें "सरणी" के रूप में संग्रहीत किया जाता है। style में .length , लंबाई को .length हुए, हमें इस शैली में सभी गुण बदल जाते हैं। दूसरे, style में बदले हुए गुणों के मूल्य शामिल हैं। संपत्ति के नाम के बराबर एक सूचकांक संपत्ति के मूल्य को संग्रहीत करता है।

अगर हम कहते हैं कि, सीएसएस कोड है:

 .myClass:hover .block, .myItem:hover .element { color: red; display: block; } 

उसके बाद इस नियम का selectorText == '.myClass:hover .block, .myItem:hover .element' , style.length == 2 , style[0] == 'color' , style[1] == 'display' ,। style.color == 'red' और style.display == 'block' ।

बाकी सब तकनीक का मामला है ...

दुर्भाग्य से, यह पता चला कि नियमों का प्राथमिक बाईपास बहुत तेजी से काम नहीं करता है (शैलियों और लिंक टैग के हमारे संस्करणों पर) ... प्रोफाइलिंग से पता चला है कि rules का उपयोग करना शेर के समय का हिस्सा लगता है। शायद WebKit इस प्रॉपर्टी को lazily को इनिशियलाइज़ करता है और पहला कॉल ऑब्जेक्ट्स के एक सेट में कुछ गहरी पार्सिंग को शुरू करता है।

यहाँ परिणाम है:

 $(document).ready(function(){ // ,    ,     if (!$ws._const.browser.isMobileSafari) { return; } var $body = $('body'); //     function addPseudoHover() { this.classList.add('ws-pseudo-hover'); } //     "" function removePseudoHover() { this.classList.remove('ws-pseudo-hover'); } //   [].filter(...) function uniq(item, index, array) { return array.indexOf(item, index + 1) == -1; } function trimHoverBase(selector) { return selector.substr(0, selector.indexOf(':hover')).trim(); } function filterHoverSelectors(selector) { return selector.indexOf(':hover') != -1; } function createBodyDelegate(hoverSelector){ $body.delegate(hoverSelector, 'mouseenter', addPseudoHover); $body.delegate(hoverSelector, 'mouseleave', removePseudoHover); } function processMutationRecord(mutationRecord) { var needRefresh = false; if (mutationRecord.addedNodes) { for(var i = 0, l = mutationRecord.addedNodes.length; i < l; i++) { if (mutationRecord.addedNodes[i].nodeName == 'LINK') { needRefresh = true; break; } } } if (needRefresh) { checkStylesheetSetDebonuced(); //       } } function checkStylesheetSet() { var allHoverSelectors = [], allRules = [], sheet, sheetCheckResult; for(var i = 0, l = document.styleSheets.length; i < l; i++) { sheet = document.styleSheets[i]; // ,      if (sheet.processed || sheet.rules.length === 0) { continue; } sheetCheckResult = checkCSSRuleSet(sheet); if (sheetCheckResult.rules.length > 0 && sheetCheckResult.selectors.length > 0) { Array.prototype.push.apply(allHoverSelectors, sheetCheckResult.selectors); Array.prototype.push.apply(allRules, sheetCheckResult.rules); } //           sheet.processed = true; } //   allRules.forEach(function(aRule){ aRule.selectorText = aRule.selectorText.replace(':hover', '.ws-pseudo-hover'); }); //   ,    body allHoverSelectors.map(trimHoverBase).filter(uniq).forEach(createBodyDelegate); } var checkStylesheetSetDebonuced = checkStylesheetSet.debounce(420); function checkCSSRuleSet(sheet) { var result = { selectors: [], rules: [] }; for(var i = 0, l = sheet.rules.length; i < l; i++) { var rule = sheet.rules[i]; if (rule.styleSheet && rule.href /* instanceof CSSImportRule*/) { //    @import checkCSSRuleSet(rule.styleSheet); } else if (rule.selectorText /* instanceof CSSStyleRule*/) { var hoverSelectors = getHoverSelectors(rule); if (hoverSelectors.length > 0) { if (checkStyles(rule)) { Array.prototype.push.apply(result.selectors, hoverSelectors); result.rules.push(rule); } } } } return result; } function checkStyles(rule) { for(var i = 0, l = rule.style.length; i < l; i++) { var styleItem = rule.style[i]; if (styleItem == 'display' && rule.style.display !== 'none') { return true; } if (styleItem == 'visibility' && rule.style.visibility !== 'hidden') { return true; } } return false; } function getHoverSelectors(rule) { return rule.selectorText.split(',').filter(filterHoverSelectors); } //      head new MutationObserver(function(mutationRecords){ mutationRecords.forEach(processMutationRecord); }).observe(document.getElementsByTagName('head')[0], { childList: true }); }); 

कुछ लिंक:

• MutationObserver समर्थन - caniuse.com/#feat=mutationobserver
• उपयोगी क्लासिस्ट संपत्ति - caniuse.com/#feat=classlist