होवर और मोबाइल डिवाइस पर ईवेंट पर क्लिक करें

Question

मैं डेस्कटॉप और मोबाइल दोनों के लिए एक उत्तरदायी वेबसाइट बना रहा हूं। मेरे पास होवर के साथ एक समस्या है और ईवेंट पर क्लिक करें जो मुझे यकीन नहीं है कि मोबाइल उपकरणों पर उपयोगकर्ताओं के लिए कैसे हल करें।

साइट पर, मेरे पास एक लिंक (div) है जो एक लिंक में लपेटा गया है। डेस्कटॉप पर, जब कोई उपयोगकर्ता इसके ऊपर हो जाता है, तो टेक्स्ट सामग्री वाला एक अलग रंगीन बॉक्स पहले बॉक्स पर स्लाइड करता है। जब कोई उपयोगकर्ता बॉक्स पर क्लिक करता है, तो लिंक उन्हें निर्दिष्ट पृष्ठ पर ले जाता है। मैं इसके लिए jQuery का उपयोग कर रहा हूँ।

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

मुझे यकीन नहीं है कि यह काम कैसे करें। मैंने jQuery मोबाइल का उपयोग करने के बारे में सोचा, लेकिन मैं पहले टैप को बाईपास करने का कोई तरीका नहीं समझ सकता (जो मोबाइल डिवाइस होवर ईवेंट की तरह व्यवहार करता है) और इसके बजाय लिंक को सक्रिय करता है।

धन्यवाद

Answer 1

मैं इस तथ्य पर @DZittersteyn से सहमत हूं कि यह एक खराब डिजाइन है। आप मोबाइल में डिफॉल्ट रूप से सामग्री को बेहतर ढंग से दिखा सकते हैं ताकि क्लिक करने वाला व्यक्ति जानता है कि उसने क्या क्लिक किया है।

if(!!('ontouchstart' in window)){//check for touch device 
    $('myElement').unbind('click mouseenter mouseleave'); //use off if you used on, to unbind usual listeners 
    $('myElement').on('click',function(){ 
    //slide down code 
    setTimeout(function(){ 
     window.location.href='asdasd.html'; 
     },2000); 
    }); 
} 

या आप उपयोग कर सकते

if(!!('ontouchstart' in window)){//check for touch device 
//behaviour and events for touch device 
} 
else{ 
//behaviour and events for pointing device like mouse 
} 

Answer 2

jQuery का उपयोग कर मोबाइल के लिए touchstart और touchend घटनाओं को सुनने के लिए प्रयास करें।

पूर्व:

$('selector').bind('touchstart', function(){ 
    //some action 
}); 
$('selector').bind('touchend', function(){ 
    //set timeout and action 
}); 

आशा इस मदद करता है।

Answer 3

if (('ontouchstart' in window || (window.DocumentTouch && document instanceof DocumentTouch))) { 
    $(".touch") 
     .bind("touchstart", function() { 
      $(this) 
       .addClass("active") 
       .bind("touchend", function() { 
        $(this).removeClass("active"); 
       }); 
     }) 
     .bind("touchenter", function() { 
      $(this) 
       .addClass("hover") 
       .bind("touchleave", function() { 
        $(this).removeClass("hover active"); 
       }); 
     }); 
}