दिलचस्प पोस्ट
जेपीजी छवि को जीआईएफ, पीएनजी और बीएमपी स्वरूप में परिवर्तित करें एकल थ्रेड के लिए नींद () का उपयोग करना Integer.valueOf () बनाम इंटीजर .परसेइंंट () स्व संदर्भित लूप का पता लगाया गया – वेबएपी से ब्राउज़र तक डेटा वापस आ गया जावास्क्रिप्ट का उपयोग कर एक आइफ्रेम को कैसे ताज़ा करें? पायथन: दो पूर्ण पथों की तुलना से संबंधित मार्ग प्राप्त करें 'फ्लोट' बनाम 'डबल' सटीक इनपुट टेक्स्ट बॉक्स में मान प्राप्त करें पायथन प्रोग्रामिंग में टैब बनाम रिक्त स्थान पीएचपी फ़ंक्शंस में निर्मित फिर से परिभाषित करें प्रिंट पूर्वावलोकन कैसे जावास्क्रिप्ट से बुलाया जा सकता है? जावास्क्रिप्ट के साथ ऑडियो बजाना? एक ही नाम के साथ बहु-विरासत कार्य क्यों करते हैं लेकिन अलग-अलग हस्ताक्षर को अतिभारित कार्यों के रूप में नहीं माना जाता? सार्वजनिक रूप से उजागर / ऐप / फ़ोल्डर के बिना एक वेब होस्ट सबफ़ोल्डर के लिए Laravel 4 कैसे स्थापित करें? कैसे jQuery या जावास्क्रिप्ट का उपयोग कर स्ट्रिंग विभाजित?

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

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

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

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

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

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


संपादित करें: इसे बोग-मानक सीएसएस :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

वेब के समाधान से एकत्रित समाधान "मोबाइल ब्राउज़र पर मंडराना प्रभाव अक्षम करें"

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

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

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

पृष्ठभूमि

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

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

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

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

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

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

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

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

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

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

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

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

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

बस!

ध्यान दें कि 300 एमएस देरी को निकालना संभव है, उदाहरण के लिए फास्टक्लिक लाइब्रेरी का उपयोग कर, लेकिन यह इस प्रश्न के लिए दायरे से बाहर है।

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

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

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

आगे की पढाई

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

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

यदि आप इसे रखना चाहते हैं :hover अपने सीएसएस में :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

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

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

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

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

हम जानते हैं कि touchstart बाद 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 }; }(); 

इसके बाद मॉड्यूल आगे लाइन के नीचे instantiated है:

 mobileNoHoverState.init(); 

मेरा समाधान 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; } 

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

तो उदाहरण के लिए, अगर मेरे पास एक लिंक है:

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

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

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

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

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

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

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

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

Iv'd समस्या के 2 समाधान मिल गया, जो कि यह अंतर्निहित है कि आप modernizr या कुछ और के साथ संपर्क का पता लगाया और 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

संपादित करें

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

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

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

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

जब मैंने टचस्क्रीन मोड में अपने बटनों में से एक को दबाया, बटन की कार्रवाई से पहले एक दूसरे के लिए होवर प्रभाव woudld आग लगा दी यहाँ मैं इसे कैसे तय किया है

 @media only screen and (max-width:1024px) { #buttonOne{ height: 44px; } #buttonOne:hover{ display:none; } } 

जब भी आप टचस्क्रीन पर कोई तत्व स्पर्श करते हैं तो आप 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); } } 

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

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

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

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

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

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

एक परियोजना में मैंने हाल ही में किया, मैंने इस समस्या का समाधान jQuery के प्रत्यायोजित ईवेंट सुविधा के साथ किया। यह एक jQuery चयनकर्ता का उपयोग करने वाले कुछ तत्वों के लिए दिखता है, और उस तत्व को सीएसएस वर्ग को जोड़ता है / हटाता है जब माउस तत्व पर होता है यह ठीक से काम करने लगता है, जहां तक ​​मैं इसे परीक्षण करने में सक्षम हूं, जिसमें आईई 10 को विंडोज 8 चलाने वाले टच-सक्षम नोटबुक पर शामिल किया गया है।

 $(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'); }); } ); 

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

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

यहां मेरा समाधान है: 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 } }) } } 

अपने पेज पर मॉडर्नजीर को शामिल करें और इसके बजाय अपने हॉवर स्टेट को सेट करें:

 html.no-touchevents .box:hover { background: blue; } 

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

 /* device is using a mouse or similar */ @media (pointer: fine) { a:hover { background: red; } } 

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

 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