2011-12-30 13 views
13

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

jQuery के hover() समारोह आंतरिक रूप से उपयोग करता है के बाद से mouseenter और mouseleave, दोनों hover() और click() पंजीकरण के साथ तत्वों बाद को गति प्रदान करने के लिए दो नल की आवश्यकता है। कई उपयोग मामलों के लिए, यह वही है जो आप करना चाहते हैं। हालांकि, उन अनुप्रयोगों में जहां hover() हैंडलिंग केवल घुमावदार तत्व पर जोर (टूलटिप, चमक, इत्यादि) जोड़ता है, यह ईवेंट को सभी एक साथ टच डिवाइस को छोड़ने के लिए और अधिक समझ सकता है, onclick हैंडलर पर स्ट्रेट जा रहा है।

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

क्या jQuery में ऐसी विधि है? कोई प्लगइन्स? या मैं यहाँ कुछ दिख रहा हूँ?


व्यवहार iPad, iPhone और कुछ एंड्रॉयड हैंडसेट पर पुष्टि की।

भागो एक डेस्कटॉप बनाम स्पर्श डिवाइस पर इस JsFiddle demo देखने के लिए कि मैं क्या बात कर रहा हूँ।

उत्तर

3

मैं Modernizr का उपयोग करना चाहिये डिवाइस के touchyness पता लगाने के लिए और बस मंडराना हैंडलर बाध्य नहीं है जब तक कि HTML तत्व "कोई स्पर्श" वर्ग है:

$('selector').click(...) 
$('.no-touch selector').hover(...) 

बाहर की जांच http://jsfiddle.net/juYf8/17/

+13

कोई निश्चित नहीं है कि यह क्यों चुना जाता है, क्या आप दोनों विकल्पों के साथ डिवाइस पर होवर ईवेंट नहीं खोलेंगे? – Aaron

4

मैं मैं हमेशा सोच रहा हूं, हाइब्रिड उपकरणों पर ऐसा क्या होगा जो स्पर्श का समर्थन करते हैं और घटनाओं को क्लिक/होवर करते हैं। इस मामले में एक बार छूने के बाद उपलब्ध पृष्ठ पर कोई होवर या क्लिक ईवेंट नहीं होंगे। क्या होता है जब उपयोगकर्ता एक बार स्क्रीन को छूता है (किस कारण से) और फिर उसके माउस या टचपैड का उपयोग करना वापस कर सकता है? साइट उसके लिए तोड़ दी गई है (कम से कम अगर वह परिणामस्वरूप छूने के लिए जारी नहीं है)।

मैं व्यक्तिगत रूप से नीचे ध्वज स्क्रिप्ट का उपयोग करता हूं और माउस के प्रवेश और माउस को घटनाओं को छूने के लिए ईवेंट छोड़ देता हूं। मुझे नहीं पता कि यह एक अच्छी तकनीक है या नहीं। मेरे मामले में यह काफी ठीक काम करता है।

var touched = false; 

$("#someElement") 
    .mouseenter(function() { 
     if (!touched) { 
      // some hover action 
      // also secure to be in NO WAY triggered on touch device 
     }; 
    } 
    .mouseleave(function() { 
     if (!touched) { 
      // some mouse leave reset hover action 
      // also secure to be in NO WAY triggered on touch device 
     }; 
    } 
    .click(function() { 
     if (!touched) { 
      // do something 
      // no double trigger on touch device 
     }; 
    } 
    .on('touchstart', function() { 
     touched = true; 
     setTimeout(function() { 
      touched = false; 
     }, 300); 
     // do touchstart stuff (similar to click or not) 
    }; 

मैं पेशेवर कोडर नहीं हूं। उनमें से कोई भी इसे अनुकूलित करने के लिए आमंत्रित किया जाता है। मेरे वेबपृष्ठ पर यह स्पर्श डिवाइस (आईपैड परीक्षण) पर छिपे हुए (डबल) ट्रिगर्स से बचने का एकमात्र तरीका प्रतीत होता है।

मुझे यह भी पता है कि इस सवाल का जवाब काफी पहले जवाब (और इसकी अच्छी टिप्पणी) के अतिरिक्त नहीं है, जो मेरी आंखों में व्यापक रूप से उपयोग में आने पर भी संकर समस्या को हल नहीं करता है।

वैसे भी उम्मीद है कि यह इसके रास्ते में मदद करता है।

संबंधित मुद्दे