मोबाइल ब्राउज़रों पर होवर प्रभावों को अक्षम करें

113

मैं एक वेब साइट लिख रहा हूं जिसका उपयोग डेस्कटॉप और टैबलेट दोनों से किया जाना है। जब इसे डेस्कटॉप से ​​देखा जा रहा है, तो मैं चाहता हूं कि स्क्रीन के क्लिक करने योग्य क्षेत्र :hoverप्रभाव (विभिन्न पृष्ठभूमि रंग, आदि) के साथ प्रकाश में आए , एक टैबलेट के साथ, कोई माउस नहीं है, इसलिए मुझे कोई हॉवर प्रभाव नहीं चाहिए।

समस्या यह है कि जब मैं टैबलेट पर कुछ टैप करता हूं, तो ब्राउज़र में कुछ प्रकार के "अदृश्य माउस कर्सर" होते हैं जो इसे उस स्थान पर ले जाते हैं जिसे मैंने टैप किया था, और फिर इसे वहां छोड़ देता है - इसलिए मैं अभी-अभी एक लाइट के साथ टैप किया जब तक मैं कुछ और टैप नहीं करता तब तक होवर प्रभाव।

जब मैं माउस का उपयोग कर रहा हूं, तो मुझे हॉवर का प्रभाव कैसे मिल सकता है, लेकिन जब मैं टचस्क्रीन का उपयोग कर रहा हूं तो उन्हें दबा दूं?

यदि कोई इसे सुझाने के बारे में सोच रहा था, तो मैं उपयोगकर्ता-एजेंट को सूँघना नहीं चाहता। एक ही डिवाइस में एक टचस्क्रीन और एक माउस हो सकता है (शायद आज इतना आम नहीं है, लेकिन भविष्य में बहुत अधिक है)। मुझे डिवाइस में कोई दिलचस्पी नहीं है, मुझे इस बात में दिलचस्पी है कि वर्तमान में इसका उपयोग कैसे किया जा रहा है: माउस या टचस्क्रीन।

मैं पहले से ही hooking की कोशिश की touchstart, touchmoveऔर touchendघटनाओं और बुला preventDefault()उन सभी पर है, जो दबाने "अदृश्य माउस कर्सर" समय की कुछ करता है, लेकिन अगर मैं दो अलग-अलग तत्वों के बीच तेजी से आगे और पीछे टैप करता हूं, तो कुछ टैप के बाद यह "माउस कर्सर" को स्थानांतरित करना शुरू कर देगा और वैसे भी होवर इफेक्ट को रोशन करेगा - यह ऐसा है जैसे मेरा preventDefaultहमेशा सम्मानित नहीं है। जब तक आवश्यक न हो मैं आपको विवरण के साथ बोर नहीं करूंगा - मुझे यकीन नहीं है कि लेने के लिए सही तरीका है; अगर किसी के पास एक सरल समाधान है, तो मैं सभी कान हूं।

संपादित करें: इसे bog-standard CSS के साथ पुन : प्रस्तुत किया जा सकता है :hover, लेकिन यहां संदर्भ के लिए त्वरित रिप्रो है।

<style>
  .box { border: 1px solid black; width: 150px; height: 150px; }
  .box:hover { background: blue; }
</style>
<div class="box"></div>
<div class="box"></div>

यदि आप दोनों बक्सों पर माउस ले जाते हैं, तो उसे एक नीली पृष्ठभूमि मिलेगी, जो मुझे चाहिए। लेकिन अगर आप दोनों में से किसी एक बॉक्स पर टैप करते हैं, तो उसे एक नीली पृष्ठभूमि भी मिलेगी, जिसे रोकने के लिए मैं कोशिश कर रहा हूं।

मैंने यहां एक नमूना भी पोस्ट किया है जो ऊपर करता है और jQuery की माउस घटनाओं को भी हुक करता है। आप इसका उपयोग यह देखने के लिए कर सकते हैं कि टैप ईवेंट भी आग लगा देंगे mouseenter, mousemoveऔर mouseleave।

javascript  hover  touch 
— जो सफेद
स्रोत
7
@ ब्लेंडर, क्या आपने प्रश्न पढ़ा है? मैंने पहले ही समझाया कि उपयोगकर्ता-एजेंट सूंघना एक बुरा विकल्प क्यों है।
— जो व्हाइट
हे जो, क्या आपको इसके लिए कोई समाधान मिला?
— इस्मतजोन
मैं इस तरह के प्रश्न की खोज कर रहा था, खुशी है कि मैंने इसे पाया!
— agpt
यह प्रश्न भी देखें, जो किसी भी स्पर्श-सक्षम डिवाइस पर होवर को अक्षम करने से संबंधित है, न कि केवल मोबाइल: stackoverflow.com/questions/23885255/…
— ब्लेड

जवाबों:

83

मैं इसे आपके प्रश्न से लेता हूं कि आपका होवर प्रभाव आपके पृष्ठ की सामग्री को बदल देता है। उस मामले में, मेरी सलाह है:

  • पर मंडराना प्रभाव जोड़ें touchstartऔर mouseenter।
  • पर हॉवर प्रभाव निकालें mouseleave, touchmoveऔर click।

वैकल्पिक रूप से, आप अपने पृष्ठ को संपादित कर सकते हैं कि कोई सामग्री परिवर्तन नहीं है।

पृष्ठभूमि

एक माउस को अनुकरण करने के लिए, वेबकिट जैसे ब्राउज़र निम्न घटनाओं को आग लगाते हैं यदि कोई उपयोगकर्ता टच स्क्रीन (आईपैड) पर एक उंगली को छूता है और जारी करता है (स्रोत: टच एंड माउस ऑन html5rocks.com):

  1. touchstart
  2. touchmove
  3. touchend
  4. 300ms देरी, जहां ब्राउज़र सुनिश्चित करता है कि यह एक एकल टैप है, न कि डबल टैप
  5. mouseover
  6. mouseenter
    • नोट : यदि कोई mouseover, mouseenterया mousemoveईवेंट पृष्ठ सामग्री को बदलता है, तो निम्न ईवेंट को कभी भी निकाल नहीं दिया जाता है।
  7. mousemove
  8. mousedown
  9. mouseup
  10. click

माउस घटनाओं को छोड़ने के लिए केवल वेबब्रोसर को बताना संभव नहीं लगता है।

क्या खराब है, अगर कोई माउसओवर ईवेंट पृष्ठ सामग्री को बदलता है, तो क्लिक इवेंट को कभी भी निकाल नहीं दिया जाता है, जैसा कि सफारी वेब कंटेंट गाइड - हैंडलिंग इवेंट , विशेष रूप से 6.4 में वन-फिंगर इवेंट्स पर बताया गया है । वास्तव में "सामग्री परिवर्तन" क्या है, ब्राउज़र और संस्करण पर निर्भर करेगा। मैंने पाया है कि iOS 7.0 के लिए, सामग्री परिवर्तन में पृष्ठभूमि रंग में परिवर्तन (या नहीं है?) है।

समाधान समझाया

संक्षेप में दुहराना:

  • पर मंडराना प्रभाव जोड़ें touchstartऔर mouseenter।
  • पर हॉवर प्रभाव निकालें mouseleave, touchmoveऔर click।

ध्यान दें कि कोई कार्रवाई नहीं है touchend!

यह स्पष्ट रूप से माउस की घटनाओं के लिए काम करता है: mouseenterऔर mouseleave(थोड़ा के संस्करणों में सुधार हुआ mouseoverऔर mouseout) निकाल दिया जाता है, और जोड़ सकते हैं और मंडराना को हटा दें।

यदि उपयोगकर्ता वास्तव में clickएक लिंक है, तो हॉवर प्रभाव भी हटा दिया जाता है। यह सुनिश्चित करता है कि यदि उपयोगकर्ता वेब ब्राउज़र में बैक बटन दबाता है तो इसे हटा दिया जाता है।

यह स्पर्श घटनाओं के लिए भी काम करता है: टचस्टार्ट पर होवर प्रभाव जोड़ा जाता है। यह टचेंड पर हटाया गया '' '' नहीं '' है। इसे फिर से जोड़ा जाता है mouseenter, और इस कारण से कोई सामग्री परिवर्तन नहीं होता है (यह पहले ही जोड़ा गया था), clickघटना भी निकाल दी जाती है, और उपयोगकर्ता को फिर से क्लिक करने की आवश्यकता के बिना लिंक का पालन किया जाता है!

एक touchstartघटना के बीच एक ब्राउज़र में 300ms की देरी होती है और clickवास्तव में इसे अच्छे उपयोग में लाया जाता है क्योंकि होवर का प्रभाव इस कम समय के दौरान दिखाया जाएगा।

यदि उपयोगकर्ता क्लिक को रद्द करने का निर्णय लेता है, तो उंगली की एक चाल सामान्य रूप से ऐसा करेगी। आम तौर पर, यह एक समस्या है क्योंकि किसी भी mouseleaveघटना को निकाल नहीं दिया जाता है, और हॉवर का प्रभाव बना रहता है। शुक्र है, यह आसानी से होवर प्रभाव को हटाकर तय किया जा सकता है touchmove।

बस!

ध्यान दें कि FastClick लाइब्रेरी का उपयोग करते हुए, उदाहरण के लिए, 300ms देरी को दूर करना संभव है , लेकिन यह इस प्रश्न के दायरे से बाहर है।

वैकल्पिक समाधान

मुझे निम्नलिखित समस्याओं के साथ निम्नलिखित समस्याएं मिली हैं:

  • ब्राउज़र का पता लगाना: त्रुटियों के लिए अत्यधिक संभावना। मान लें कि किसी डिवाइस में माउस या टच है, जबकि टच प्रोलिफिरेट प्रदर्शित करते समय दोनों का संयोजन अधिक से अधिक सामान्य हो जाएगा।
  • सीएसएस मीडिया का पता लगाने: केवल सीएसएस-एकमात्र समाधान जिसके बारे में मुझे पता है। अभी भी त्रुटियों की संभावना है, और अभी भी मानता है कि एक उपकरण में माउस या स्पर्श है, जबकि दोनों संभव हैं।
  • क्लिक इवेंट का अनुकरण करें touchend: यह लिंक का गलत तरीके से अनुसरण करेगा, भले ही उपयोगकर्ता केवल लिंक को क्लिक करने के लिए स्क्रॉल या ज़ूम करना चाहता हो, वास्तव में लिंक पर क्लिक किए बिना।
  • माउस आयोजनों को दबाने के लिए एक वैरिएबल का उपयोग करें: इसमें एक वैरिएबल touchendका उपयोग उस समय की स्थिति में राज्य परिवर्तन को रोकने के लिए बाद के माउस ईवेंट में एक इफ-कंडीशन के रूप में किया जाता है। क्लिक इवेंट में वैरिएबल रीसेट हो जाता है। इस पेज पर देखें वाल्टर रोमन का जवाब। यह एक सभ्य समाधान है अगर आप वास्तव में स्पर्श इंटरफेस पर एक हॉवर प्रभाव नहीं चाहते हैं। दुर्भाग्य से, यह तब काम नहीं करता है जब किसी touchendअन्य कारण से निकाल दिया जाता है और कोई क्लिक घटना नहीं निकाल दी जाती है (उदाहरण के लिए उपयोगकर्ता स्क्रॉल या ज़ूम किया हुआ), और बाद में एक माउस के साथ लिंक का अनुसरण करने की कोशिश कर रहा है (यानी माउस और टच इंटरफ़ेस दोनों के साथ डिवाइस पर। )।

आगे की पढाई

— MacFreek
स्रोत
1
अच्छा उत्तर। मैंने अपना हल बनाने के लिए आपकी फिडेल का उपयोग किया। हालांकि कभी-कभी टचडाउन की जरूरत होती है। (जब कोई टचमॉव नहीं चलता है - यानी जब उपयोगकर्ता स्वयं दस्तावेज़ को बंद कर देता है ...)
— आगमनेनुस
महान जवाब लेकिन ज्यादातर मामलों में मैं ज्यादातर मामलों में touchend इसके बजाय उपयोग करने का सुझाव देता हूं, touchstartजब उपयोगकर्ता पृष्ठ को ऊपर या नीचे स्वाइप करने की कोशिश कर रहा होता है, तो तुरंत कार्रवाई से बचने के लिए। अभी भी होगा, लेकिन विचलित या भ्रमित होने की संभावना कम है (यह मानते हुए कि यह कुछ हानिरहित है जैसे कि एक लेबल प्रदर्शित करना, कुछ ऐसा नहीं जिसे उपयोगकर्ता को पता होना चाहिए)
— user56reinstatemonica8
19

जब मैं माउस का उपयोग कर रहा हूं, तो मुझे हॉवर का प्रभाव कैसे मिल सकता है, लेकिन जब मैं टचस्क्रीन का उपयोग कर रहा हूं तो उन्हें दबा दूं?

हो सकता है कि टचस्क्रीन के लिए हॉवर इफेक्ट्स को दबाने के बारे में ऐसा न हो, लेकिन माउस इवेंट्स के लिए हॉवर इफेक्ट्स जोड़ने के रूप में?

यदि आप :hoverअपने सीएसएस में प्रभाव रखना चाहते हैं तो आप विभिन्न मीडिया के लिए अलग-अलग शैलियों को निर्दिष्ट कर सकते हैं:

@media screen { /* hover styles here */ } 

@media handheld { /* non-hover styles here */ }

सिवाय इसके कि दुर्भाग्य से बहुत सारे मोबाइल डिवाइस हैं जो इसे अनदेखा करते हैं और स्क्रीन नियमों का उपयोग करते हैं। सौभाग्य से बहुत से नए मोबाइल / टैबलेट ब्राउज़र कुछ कट्टर मीडिया प्रश्नों का समर्थन करते हैं:

@media screen and (max-width:800px) { /* non-hover styles here */ }

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

मीडिया के सवालों पर आगे पढ़ रहे हैं? इस बारे में बहुत सारे लेख ऑनलाइन हैं - यहां एक है: http://www.alistapart.com/articles/return-of-the-mobile-stylesheet

यदि आप अपने CSS से होवर के प्रभावों को शिफ्ट करते हैं और उन्हें जावास्क्रिप्ट के साथ लागू करते हैं तो आप विशेष रूप से माउस ईवेंट्स से जुड़ सकते हैं, और / या फिर आप केवल स्क्रीन के आकार के आधार पर सबसे खराब "समस्या" के साथ कुछ अनुमान लगा सकते हैं। उपयोगकर्ता जो एक माउस का उपयोग कर रहा है, होवर प्रभावों पर याद करता है।

— nnnnnn
स्रोत
मैं केवल माउस इवेंट्स के लिए हॉवर इफेक्ट्स जोड़ना पसंद करूंगा। लेकिन टच इवेंट्स माउस इवेंट्स का अनुकरण करते हैं। अगर मैं स्पर्श घटनाओं और कॉल को हुक करता हूं preventDefault(), तो कभी-कभी माउस घटनाओं को दबा देता है, लेकिन जैसा कि मैंने अपने प्रश्न में कहा था, यह विश्वसनीय नहीं है।
— जो व्हाइट 13
6
मीडिया के प्रश्नों के लिए, जब विंडोज 8 बाहर आता है और पीसी में टच स्क्रीन और चूहे दोनों होते हैं, तो क्या होता है ? यदि उपयोगकर्ता माउस के साथ घूमता है, तो वे माउस कर्सर देखेंगे, और मुझे होवर प्रभाव चाहिए; अगर वे टचस्क्रीन के साथ टैप करते हैं, तो मुझे होवर इफेक्ट्स नहीं चाहिए। लेकिन मुझे स्पर्श और माउस के बीच अंतर का पता लगाने का एक विश्वसनीय तरीका नहीं मिला है।
— जो व्हाइट
अच्छी तरह से शायद ब्राउज़र डेवलपर्स स्पर्श और माउस के साथ उपकरणों पर उपयोगकर्ताओं की बड़ी संख्या होने के बाद पता लगाने को अधिक सुसंगत बनाने के लिए अधिक प्रेरित होंगे। पर अभी के लिए? मैं स्क्रीन आकार के आधार पर अनुमान लगा रहा हूं, लेकिन अन्य उत्तरों में अन्य सलाह है। क्षमा करें, मैं आगे मदद नहीं कर सकता।
— nnnnnn
9

मैंने निम्नलिखित जेएस को एक हालिया परियोजना के लिए लिखा था, जो एक डेस्कटॉप / मोबाइल / टैबलेट साइट थी जिसमें हॉवर प्रभाव होता है जो स्पर्श पर दिखाई नहीं देना चाहिए।

mobileNoHoverStateनीचे मॉड्यूल एक चर है preventMouseover(शुरू के रूप में घोषित false), पर सेट होता है trueजब कोई उपयोगकर्ता आग touchstartएक तत्व पर घटना, $target।

preventMouseoverfalseजब भी mouseoverघटना को निकाल दिया जाता है, तब वापस सेट किया जा रहा है, जो साइट को इस उद्देश्य के रूप में काम करने की अनुमति देता है कि क्या उपयोगकर्ता अपने टचस्क्रीन और माउस दोनों का उपयोग कर रहा है।

हम जानते हैं कि इस आदेश के mouseoverबाद उन्हें ट्रिगर किया जा रहा है touchstartकि उन्हें भीतर घोषित किया जा रहा है init।

var mobileNoHoverState = function() {

    var hoverClass = 'hover',
        $target = $(".foo"), 
        preventMouseover = false;

    function forTouchstart() {
        preventMouseover = true;
    }

    function forMouseover() {
        if (preventMouseover === false) {
            $(this).addClass(hoverClass);
        } else {
            preventMouseover = false;
        }
    }

    function forMouseout() {
        $(this).removeClass(hoverClass);
    }

    function init() {
        $target.on({
            touchstart  : forTouchstart,
            mouseover   : forMouseover,
            mouseout    : forMouseout
        });                
    }

    return {
        init: init
    };
}();

इसके बाद मॉड्यूल को लाइन के नीचे तुरंत घुमाया जाता है:

mobileNoHoverState.init();
— वाल्टर रोमन
स्रोत
"जब भी माउसओवर ईवेंट को निकाल दिया जाता है, तब रोकथाम को सही पर वापस सेट किया जा रहा है, जो साइट को इस उद्देश्य के लिए काम करने की अनुमति देता है यदि उपयोगकर्ता अपने टचस्क्रीन और माउस दोनों का उपयोग कर रहा है।" - आपका कोड ऐसा नहीं कर रहा है। क्या मैं कुछ भूल रहा हूँ?
— Redtopia
@Redtopia सिर के लिए धन्यवाद! मैंने उत्तर को बिट कोड के साथ अद्यतन किया है जो कि बचा हुआ है।
— वाल्टर रोमन
फ़ंक्शन घोषणा के बाद आपको अर्धविराम की आवश्यकता नहीं है
— nacholibre
@nacholibre उचित अर्ध-उपनिवेश उपयोग को रखा गया है
— वाल्टर रोमन
6

मैं वास्तव में cssअपने आप को एक शुद्ध समाधान चाहता था , क्योंकि मेरे सभी विचारों के चारों ओर एक वजनदार जावास्क्रिप्ट समाधान छिड़कना एक अप्रिय विकल्प की तरह लग रहा था। अंत में @ media.hover क्वेरी मिली , जो यह पता लगा सकती है कि "प्राथमिक इनपुट तंत्र उपयोगकर्ता को तत्वों पर मंडराने की अनुमति देता है या नहीं।" यह स्पर्श उपकरणों से बचता है जहां "हॉवरिंग" इनपुट डिवाइस की प्रत्यक्ष क्षमता की तुलना में अधिक अनुकरणीय क्रिया है।

उदाहरण के लिए, यदि मेरे पास लिंक है:

<a href="/" class="link">Home</a>

तब मैं इसे तभी सुरक्षित रूप से स्टाइल कर सकता हूं :hoverजब डिवाइस आसानी से इसका समर्थन करता है css:

@media (hover: hover) {
  .link:hover { /* hover styles */ }
}

जबकि अधिकांश आधुनिक ब्राउज़र इंटरैक्शन मीडिया फ़ीचर क्वेरी का समर्थन करते हैं, कुछ लोकप्रिय ब्राउज़र जैसे IE और फ़ायरफ़ॉक्स नहीं करते हैं। मेरे मामले में यह ठीक काम करता है, क्योंकि मेरा इरादा केवल डेस्कटॉप पर क्रोम और मोबाइल पर क्रोम और सफारी का समर्थन करना था।

— flintinatux
स्रोत
जब आप Chrome devtools में उपकरणों का अनुकरण करते हैं तो अच्छा समाधान काम करने लगता है। लेकिन यह अभी भी क्रोम एंड्रॉइड के लिए काम नहीं करता है :-(
— Sjeiti
मुझे लगता है कि यह सबसे सुविधाजनक और सही समाधान है। उम्मीद है कि जल्द ही इसे W3C मानकों में जोड़ा जाएगा।
— जीपीरोस्ट
5

मेरा समाधान एचओएम-सक्रिय सीएसएस वर्ग को HTML टैग में जोड़ना है, और इसे सभी सीएसएस चयनकर्ताओं की शुरुआत में उपयोग करें: होवर के साथ और पहली टचस्टार्ट घटना पर उस वर्ग को हटा दें।

http://codepen.io/Bnaya/pen/EoJlb

जे एस:

(function () {
    'use strict';

    if (!('addEventListener' in window)) {
        return;
    }

    var htmlElement = document.querySelector('html');

    function touchStart () {
        document.querySelector('html').classList.remove('hover-active');

        htmlElement.removeEventListener('touchstart', touchStart);
    }

    htmlElement.addEventListener('touchstart', touchStart);
}());

HTML:

<html class="hover-active">

सीएसएस:

.hover-active .mybutton:hover {
    box-shadow: 1px 1px 1px #000;
}
— Bnaya
स्रोत
एक स्पर्श घटना को सुनने के बजाय, आप के लिए परीक्षण कर सकते हैं 'ontouchstart' in window। जैसेif ('ontouchstart' in window) document.querySelector('html').classList.remove('hover-active');
— युवल ए।
@YuvalA। कारण यह है कि मैं टच इवेंट का इंतजार कर रहा हूं कि इसमें पॉइंटर और टच सपोर्ट वाले डिवाइस हैं, और यूज़र पॉइंटर का इस्तेमाल कर रहे हैं जो मैं हॉवर नहीं हटाना चाहता। यह संभव है कि उपयोगकर्ता टच और फिर पॉइंटर का उपयोग करेगा लेकिन मुझे उसके बारे में बहुत कुछ नहीं करना है
— बन्नाया
2

एक ही समस्या को हल करने के लिए मैंने जो किया है वह है एक फीचर डिटेक्शन (मैं इस कोड की तरह कुछ का उपयोग करता हूं ), यह देखते हुए कि क्या onTouchMove को परिभाषित किया गया है, और यदि मैं सीएसएस वर्ग "टचमोड" को शरीर में जोड़ता हूं, तो मैं जोड़ देता हूं " desktopMode "।

फिर हर बार कुछ शैली प्रभाव केवल एक टच डिवाइस पर लागू होता है, या केवल डेस्कटॉप के लिए सीएसएस नियम उपयुक्त वर्ग के साथ प्रस्तुत किया जाता है:

.desktopMode .someClass:hover{ color: red }
.touchMode .mainDiv { width: 100%; margin: 0; /*etc.*/ }

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

— स्टीन जी स्ट्रिंडहाग
स्रोत
2

ठीक है, मुझे jst में एक समान समस्या थी लेकिन मीडिया प्रश्नों और सरल सीएसएस के साथ इसे ठीक करने में कामयाब रहे। मुझे यकीन है कि मैं यहां कुछ नियम तोड़ रहा हूं, लेकिन यह मेरे लिए काम कर रहा है।

मुझे मूल रूप से किसी के द्वारा किए गए एक बड़े पैमाने पर आवेदन लेना था, और इसे उत्तरदायी बनाना था। उन्होंने jQueryUI का उपयोग किया और मुझे उनके किसी भी jQuery के साथ छेड़छाड़ न करने के लिए कहा, इसलिए मैं अकेले CSS का उपयोग करने के लिए प्रतिबंधित था।

जब मैंने टचस्क्रीन मोड में उनके एक बटन को दबाया, तो बटन के एक्शन के प्रभावी होने से पहले हॉवर ने एक सेकंड के लिए जोर से आग बुझाई। यहां मैंने इसे कैसे तय किया।

@media only screen and (max-width:1024px) {

       #buttonOne{
            height: 44px;
        }


        #buttonOne:hover{
            display:none;
        }
}
— बेधड़क
स्रोत
2

मेरी परियोजना में हमने https://www.npmjs.com/package/postcss-hover-prefix और https://modernizr.com/ का उपयोग करके इस मुद्दे को हल किया। सबसे पहले हमने आउटपुट css फाइलों को पोस्ट-प्रोसेस किया postcss-hover-prefix। यह .no-touchसभी सीएसएस hoverनियमों के लिए जोड़ता है।

const fs = require("fs");
const postcss = require("postcss");
const hoverPrfx = require("postcss-hover-prefix");

var css = fs.readFileSync(cssFileName, "utf8").toString();
postcss()
   .use(hoverPrfx("no-touch"))
   .process(css)
   .then((result) => {
      fs.writeFileSync(cssFileName, result);
   });

सीएसएस

a.text-primary:hover {
  color: #62686d;
}

हो जाता है

.no-touch a.text-primary:hover {
  color: #62686d;
}

रनटाइम में Modernizrस्वचालित रूप से htmlइस तरह टैग करने के लिए सीएसएस कक्षाएं जोड़ता है

<html class="wpfe-full-height js flexbox flexboxlegacy canvas canvastext webgl 
  no-touch 
  geolocation postmessage websqldatabase indexeddb hashchange
  history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage
  borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients
  cssreflections csstransforms csstransforms3d csstransitions fontface
  generatedcontent video audio localstorage sessionstorage webworkers
  applicationcache svg inlinesvg smil svgclippaths websocketsbinary">

सीएसएस प्लस मॉडर्निज़्र का ऐसा पोस्ट-प्रोसेसिंग टच डिवाइस के लिए होवर को अक्षम करता है और दूसरों के लिए सक्षम बनाता है। वास्तव में यह दृष्टिकोण बूटस्ट्रैप 4 से प्रेरित था, वे एक ही मुद्दे को कैसे हल करते हैं: https://v4-alpha.getbootstrap.com/getting-started/browsers-devices/#sticky-hoverfocus-on-mobile

— स्टानिस्लाव बर्कोव
स्रोत
1

mouseLeaveजब भी आप टचस्क्रीन पर किसी तत्व को स्पर्श करते हैं तो आप ईवेंट को ट्रिगर कर सकते हैं । यहाँ सभी <a>टैग के लिए एक समाधान है :

function removeHover() {
    var anchors = document.getElementsByTagName('a');
    for(i=0; i<anchors.length; i++) {
        anchors[i].addEventListener('touchstart', function(e){
            $('a').mouseleave();
        }, false);
    }
}
— खलोव ने कहा
स्रोत
JSHint का कहना है "एक लूप के भीतर कार्य न करें"।
— नेटऑपरेटर विब्बी
यह हैक है। यह एक पुन: प्रयोज्य कोड नहीं है जिसे अच्छा अभ्यास माना जा सकता है। @NetOperatorWibby
— कहा गया
यह वास्तव में कोड को पोस्ट करने में सहायक नहीं है जिसे अच्छा अभ्यास नहीं माना जा सकता है। वह चाकू के घाव पर बैंड-एड लगाने जैसा है।
— नेटऑपरेटर विब्बी
1

Iv'd को समस्या के 2 समाधान मिले, जिसका अर्थ है कि आप आधुनिक या कुछ और के साथ स्पर्श का पता लगाते हैं और html तत्व पर एक स्पर्श वर्ग सेट करते हैं।

यह अच्छा है लेकिन बहुत अच्छी तरह से समर्थित नहीं है :

html.touch *:hover {
    all:unset!important;
}

लेकिन इसके लिए बहुत अच्छा समर्थन है :

html.touch *:hover {
    pointer-events: none !important;
}

मेरे लिए दोषरहित काम करता है, यह सभी हॉवर प्रभाव की तरह होता है जब आपके पास एक बटन पर स्पर्श होता है तो यह हल्का हो जाएगा लेकिन माउस घटनाओं के लिए प्रारंभिक होवर प्रभाव के रूप में छोटी गाड़ी को समाप्त नहीं करेगा।

नो-टच डिवाइस से टच का पता लगाने से मुझे लगता है कि आधुनिकीकरण ने सबसे अच्छा काम किया है:

https://github.com/Modernizr/Modernizr/blob/master/feature-detects/touchevents.js

संपादित करें

मुझे इस मुद्दे का एक बेहतर और सरल समाधान मिला

यह निर्धारित करने के लिए कि क्लाइंट एक टच डिवाइस है या नहीं

— साइमन Dragsbæk
स्रोत
0

यह आपके सीएसएस को देखने में मदद कर सकता है, क्योंकि यह एक अजीब समस्या है। लेकिन वैसे भी, अगर यह हो रहा है और बाकी सब अच्छा है, तो आप होवर इफेक्ट को जावास्क्रिप्ट में शिफ्ट करने की कोशिश कर सकते हैं (आप जैक्विरी का भी इस्तेमाल कर सकते हैं)। सीधे शब्दों में, माउसओवर या बेहतर अभी भी माउसइंटर घटना से बंधे और घटना के आग लगने पर अपने तत्व को हल्का करें।

अंतिम उदाहरण यहां देखें : http://api.jquery.com/mouseover/ , जब आप आग लगाते हैं तो लॉग के समान कुछ का उपयोग कर सकते हैं और इसे वहां से ले जा सकते हैं!

— balach
स्रोत
सीएसएस के बारे में कुछ खास नहीं; मेरा संपादन देखें और मैंने पहले ही कोशिश की mouseenter; कोई पाँसा नहीं। चाल दोहन "अदृश्य माउस कर्सर", तो यह चलाता है mouseenterऔर mousemove(और mouseleaveजब आप कहीं और नल)।
— जो व्हाइट
0

यदि आप जावास्क्रिप्ट का उपयोग करने के लिए खुश हैं तो आप अपने पेज में मॉडर्निज़्र का उपयोग कर सकते हैं । जब पृष्ठ लोड होता है, तो एक गैर-टच स्क्रीन ब्राउज़र में HTML टैग में '.no-touch' वर्ग जोड़ा जाता है, लेकिन एक टच स्क्रीन ब्राउज़र के लिए, html टैग में कक्षा 'html' जोड़ी जाएगी। ।

फिर यह देखने का एक मामला है कि क्या html टैग में आपके माउसेंटर और मूसलीवेट श्रोताओं को जोड़ने का निर्णय लेने से पहले कोई स्पर्श वर्ग नहीं है।

if($('html').hasClass('no-touch')){
    $('.box').on("mouseenter", function(event){
            $(this).css('background-color','#0000ff')
    });
    $('.box').on("mouseleave", function(event){
            $(this).css('background-color','')
    });
}

एक टचस्क्रीन डिवाइस के लिए घटनाओं में कोई श्रोता नहीं होगा जिससे आपको टैप करने पर कोई हॉवर इफ़ेक्ट नहीं मिलेगा।

— Stanz
स्रोत
जब यह सीएसएस के साथ किया जा सकता है न तो जावास्क्रिप्ट का उपयोग करें (jquery) इसकी कंप्यूटर शक्ति की बर्बादी
— साइमन Dragsb'k
1
अभी तक, आपके सीएसएस में, आप .touchऔर के लिए अलग नियम परिभाषित कर सकते हैं .no-touch। मॉर्डनाइज़र के साथ मिलकर सीएसएस में अपने उत्तर को फिर से लिखने के लिए, html.no-touch .box:hover {background-color: "#0000ff"}और html.touch .box:hoverचाल के लिए कुछ भी परिभाषित नहीं करना चाहिए, क्योंकि ओपी केवल मोबाइल :hoverएस से बचने की कोशिश कर रहा है ।
— वाल्टर रोमन
0

मैंने हाल ही में एक परियोजना में, मैंने इस समस्या को jQuery के प्रत्यायोजित इवेंट फीचर से हल किया। यह एक jQuery चयनकर्ता का उपयोग करने वाले कुछ तत्वों की तलाश करता है, और उन तत्वों के लिए सीएसएस वर्ग को जोड़ता / हटाता है जब माउस तत्व से अधिक होता है। यह अच्छी तरह से काम करने लगता है जहाँ तक मैं इसका परीक्षण करने में सक्षम रहा हूं, जिसमें विंडोज 8 पर चलने वाले एक टच-सक्षम नोटबुक पर IE10 शामिल है।

$(document).ready(
    function()
    {
        // insert your own selector here: maybe '.hoverable'?
        var selector = 'button, .hotspot';

        $('body')
            .on('mouseover', selector, function(){ $(this).addClass('mouseover');    })
            .on('mouseout',  selector, function(){ $(this).removeClass('mouseover'); })
            .on('click',     selector, function(){ $(this).removeClass('mouseover'); });
    }
);

संपादित करें: यह समाधान, निश्चित रूप से, आवश्यकता है कि आप ": हॉवर" चयनकर्ताओं को हटाने के लिए अपने सीएसएस को बदल दें और अग्रिम में चिंतन करें कि आप किन तत्वों के लिए "होवरेबल" होना चाहते हैं।

यदि आपके पृष्ठ पर बहुत सारे तत्व हैं (जैसे कई हज़ार) तो यह थोड़ा धीमा हो सकता है, हालाँकि, क्योंकि यह समाधान पृष्ठ के सभी तत्वों पर तीन प्रकार की घटनाओं को पकड़ता है , और यदि चयनकर्ता मेल खाता है तो यह अपनी बात करता है। मैंने "hover" के बजाय CSS वर्ग "माउसओवर" का नाम दिया, क्योंकि मैं नहीं चाहता था कि कोई भी CSS पाठक ": hover" जहाँ मैंने ".hover" लिखा हो, पढ़ सके।

— toon81
स्रोत
0

यहाँ मेरा समाधान है: http://jsfiddle.net/agamemnus/g56aw709/-- नीचे कोड।

सभी को करने की ज़रूरत है कि उनके ": होवर" को ".हॉवर" में बदलना है ... यही है! इस और बाकी के बीच बड़ा अंतर यह है कि यह गैर-विलक्षण तत्व चयनकर्ताओं जैसे पर भी काम करेगा .my_class > *:hover {।

handle_css_hover_effects ()

function handle_css_hover_effects (init) {
 var init = init || {}
 var handle_touch_events = init.handle_touch_events || true
 var handle_mouse_events = init.handle_mouse_events || true
 var hover_class         = init.hover_class         || "hover"
 var delay_preferences   = init.delay_preferences   || {touch: {add: 500, remove: 500}}
 function default_handler (curobj, input_type, op) {
  var hovered_element_selector = "*" + ((op == "add") ? ":" : ("." + hover_class))
  var hovered_elements = Array.prototype.slice.call(document.body.querySelectorAll(hovered_element_selector))
  var modified_list = []
  while (true) {
   if ((curobj == null) || (curobj == document.documentElement)) break
   if (hovered_elements.indexOf(curobj) != -1) modified_list.push (curobj)
   curobj = curobj.parentNode
  }
  function do_hover_change () {modified_list.forEach (function (curobj) {curobj.classList[op](hover_class)})}
  if ((!delay_preferences[input_type]) || (!delay_preferences[input_type][op])) {
   do_hover_change ()
  } else {
   setTimeout (do_hover_change, delay_preferences[input_type][op])
  }
 }

 if (handle_mouse_events) {
  document.body.addEventListener ('mouseover' , function (evt) {var curobj = evt.target; default_handler (curobj, "mouse", "add")})
  document.body.addEventListener ('mouseout'  , function (evt) {var curobj = evt.target; default_handler (curobj, "mouse", "remove")})
  document.body.addEventListener ('click'     , function (evt) {var curobj = evt.target; default_handler (curobj, "mouse", "remove")})
 }

 if (handle_touch_events) {
  document.body.addEventListener ('touchstart', function (evt) {var curobj = evt.target; default_handler (curobj, "touch", "add")})
  document.body.addEventListener ('touchend'  , function (evt) {var curobj = evt.target; default_handler (curobj, "touch", "remove")})
  document.body.addEventListener ('touchmove',  function (evt) {
   var curobj = evt.target
   var hovered_elements = Array.prototype.slice.call(document.body.querySelectorAll("*:hover"))
   var lastobj = null
   evt = evt.changedTouches[0]
   var elements_at_point = get_elements_at_point (evt.pageX, evt.pageY)
   // Get the last element that isn't at the current point but is still hovered over, and remove only its hover attribute.
   while (true) {
    if ((curobj == null) || (curobj == document.documentElement)) break
    if ((hovered_elements.indexOf(curobj) != -1) && (elements_at_point.indexOf(curobj) == -1)) lastobj = curobj
    curobj = curobj.parentNode
   }
   if (lastobj == null) return
   if ((!delay_preferences.touch) || (!delay_preferences.touch.remove)) {
    lastobj.classList.remove(hover_class)
   } else {
    setTimeout (function () {lastobj.classList.remove(hover_class)}, delay_preferences.touch.remove)
   }

   function get_elements_at_point (x, y) {
    var el_list = [], pe_list = []
    while (true) {
     var curobj = document.elementFromPoint(x, y)
     if ((curobj == null) || (curobj == document.documentElement)) break
     el_list.push (curobj); pe_list.push (curobj.style.pointerEvents)
     curobj.style.pointerEvents = "none"
    }
    el_list.forEach (function (current_element, i) {current_element.style.pointerEvents = pe_list[i]})
    return el_list
   }
  })
 }
}
— Agamemnus
स्रोत
0

नमस्कार व्यक्ति भविष्य से, आप शायद pointerऔर / या hoverमीडिया क्वेरी का उपयोग करना चाहते हैं । handheldमीडिया क्वेरी पदावनत किया गया था।

/* device is using a mouse or similar */
@media (pointer: fine) {
  a:hover {
    background: red;
  }
}
— olanod
स्रोत
-1

इस आसान 2019 jquery समाधान का प्रयास करें, हालांकि यह थोड़ी देर के आसपास रहा है;

  1. इस प्लगइन को सिर पर जोड़ें:

    src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"

  2. इसे js में जोड़ें:

    $("*").on("touchend", function(e) { $(this).focus(); }); //applies to all elements

  3. इसके लिए कुछ सुझाए गए रूपांतर हैं:

    $(":input, :checkbox,").on("touchend", function(e) {(this).focus);}); //specify elements

$("*").on("click, touchend", function(e) { $(this).focus(); });  //include click event`

css: body { cursor: pointer; } //touch anywhere to end a focus`

टिप्पणियाँ

  • टूलटिप्स को प्रभावित करने से बचने के लिए, बूटस्ट्रैप.जेएस से पहले प्लगइन रखें
  • केवल सफारी या क्रोम का उपयोग करके iPhone XR ios 12.1.12 और ipad 3 ios 9.3.5 पर परीक्षण किया गया।

संदर्भ:

https://code.jquery.com/ui/

https://api.jquery.com/category/selectors/jquery-selector-extensions/

— डैरेन
स्रोत
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.