मोबाइल सफारी में क्लिक घटनाओं पर 300ms देरी को खत्म करें

Question 1

मैंने पढ़ा है कि जिस समय घटना आग लगने के समय लिंक / बटन पर क्लिक की जाती है , उस समय से क्लिक करने पर मोबाइल सफारी में 300 मी देरी होती है । देरी का कारण यह देखने के लिए प्रतीक्षा करना है कि क्या उपयोगकर्ता डबल-क्लिक करने का इरादा रखता है, लेकिन एक यूएक्स परिप्रेक्ष्य से 300ms की प्रतीक्षा अक्सर अवांछनीय है।

इस 300ms देरी को खत्म करने के लिए एक समाधान jQuery मोबाइल "टैप" हैंडलिंग का उपयोग करना है। दुर्भाग्य से मैं इस ढांचे से परिचित नहीं हूं और कुछ बड़े ढांचे को लोड नहीं करना चाहता हूं अगर मुझे जरूरत है touchendतो सही तरीके से आवेदन करने की एक पंक्ति या दो कोड है ।

कई साइटों की तरह, मेरी साइट में इस तरह की कई क्लिक घटनाएं हैं:

$("button.submitBtn").on('click', function (e) {   
  $.ajaxSubmit({... //ajax form submisssion
});

$("a.ajax").on('click', function (e) {   
  $.ajax({... //ajax page loading
});

$("button.modal").on('click', function (e) {   
      //show/hide modal dialog
});

और जो मैं करना चाहता हूं वह यह है कि इस तरह के सिंगल कोड स्निपेट का उपयोग करके उन सभी क्लिक की घटनाओं पर 300ms देरी से छुटकारा पाएं :

$("a, button").on('tap', function (e) {
 $(this).trigger('click');
 e.preventDefault();
});

क्या यह एक बुरा / अच्छा विचार है?

Question 2

यदि आप व्यूपोर्ट सेट करते हैं तो अब कुछ मोबाइल ब्राउजर 300 ms की देरी को खत्म करते हैं। अब आपको वर्कअराउंड का उपयोग करने की आवश्यकता नहीं है।

<meta name="viewport" content="width=device-width, user-scalable=no">

यह वर्तमान में है Android के लिए Chrome समर्थित , फ़ायरफ़ॉक्स Android के लिए और सफारी iOS के लिए

हालांकि आईओएस सफारी पर , डबल-टैप अनज़ोबल पेज पर स्क्रॉल जेस्चर है। इस कारण से वे 300ms की देरी को दूर नहीं कर सकते । यदि वे गैर-योग्य पृष्ठों पर देरी को दूर नहीं कर सकते हैं, तो वे इसे ज़ूम करने योग्य पृष्ठों पर हटाने की संभावना नहीं रखते हैं।

विंडोज़ फ़ोन भी अनजाने पृष्ठों पर 300ms देरी को बरकरार रखते हैं, लेकिन उनके पास iOS की तरह कोई वैकल्पिक इशारा नहीं है, इसलिए क्रोम के रूप में इस देरी को दूर करना उनके लिए संभव है।आप का उपयोग कर विंडोज फोन पर देरी को दूर कर सकते हैं:

html {
-ms-touch-action: manipulation;
touch-action: manipulation;
}

स्रोत: http://updates.html5rocks.com/2013/12/300ms-tap-delay-gone-away

अद्यतन २०१५ दिसंबर

अब तक, iOS पर WebKit और Safari ने सिंगल टैप्स लिंक या बटन को सक्रिय करने से पहले 350ms देरी की थी ताकि लोग डबल टैप के साथ पेजों को ज़ूम कर सकें। Chrome ने कुछ महीने पहले ही यह पता लगाने के लिए एक चालाक एल्गोरिथ्म का उपयोग करके इसे बदल दिया और WebKit एक समान दृष्टिकोण के साथ पालन करेगा । लेख कुछ महान अंतर्दृष्टि देता है कि ब्राउज़र स्पर्श इशारों के साथ कैसे काम करते हैं और कैसे ब्राउज़र अभी भी आज की तुलना में बहुत अधिक स्मार्ट हो सकते हैं।

UPDATE 2016 मार्च

आईओएस के लिए सफारी पर, "फास्ट-टैप" प्रतिक्रिया बनाने के लिए एक दूसरे टैप का पता लगाने के लिए 350 एमएस प्रतीक्षा समय को हटा दिया गया है। यह उन पृष्ठों के लिए सक्षम है, जो चौड़ाई = डिवाइस-चौड़ाई या उपयोगकर्ता-स्केलेबल = नहीं के साथ व्यूपोर्ट की घोषणा करते हैं। लेखक यहांtouch-action: manipulation दस्तावेज के रूप में सीएसएस का उपयोग करके विशिष्ट तत्वों पर फास्ट-टैप व्यवहार का विकल्प चुन सकते हैं (नीचे स्क्रॉल करें 'फास्ट-टैप व्यवहार' शीर्षक) और यहां ।

Question 3

यह प्लगइन -FastClick वित्तीय टाइम्स द्वारा विकसित यह आपके लिए पूरी तरह से करता है!

क्लिक फ़ंक्शन के बाद event.stopPropagation();और / या event.preventDefault();सीधे जोड़ने के लिए सुनिश्चित करें, अन्यथा यह दो बार चल सकता है जैसा कि मेरे लिए, यानी:

$("#buttonId").on('click',function(event){
    event.stopPropagation(); event.preventDefault();
   //do your magic

});

Question 4

मुझे पता है कि यह पुराना है, लेकिन क्या आप यह देखने के लिए परीक्षण नहीं कर सकते हैं कि क्या "स्पर्श" ब्राउज़र में समर्थित है? फिर एक चर बनाएं जो या तो "टचेंड" या "क्लिक" है और उस चर का उपयोग उस घटना के रूप में करें जो आपके तत्व के लिए बाध्य हो जाती है?

var clickOrTouch = (('ontouchend' in window)) ? 'touchend' : 'click';
$('#element').on(clickOrTouch, function() {
    // do something
});

ताकि कोड नमूना यह देखने के लिए जांचें कि क्या "टचेंड" घटना ब्राउज़र में समर्थित है और यदि नहीं तो हम "क्लिक" इवेंट का उपयोग करते हैं।

(संपादित करें: "टचेंड" को "ऑनटचेंड" में बदल दिया)

Question 5

मुझे हैमर.जेएस ( जीथूब पेज) नामक एक बेहद लोकप्रिय विकल्प मिला है, जो मुझे लगता है कि सबसे अच्छा तरीका है।

Hammer.js, Fastclick.js (सबसे उत्तोलित उत्तर) की तुलना में अधिक पूर्ण विशेषताओं वाली टच लाइब्रेरी (कई स्वाइप कमांड) है।

हालांकि खबरदार: मोबाइल उपकरणों पर तेजी से स्क्रॉल करना वास्तव में यूआई को लॉक करने के लिए जाता है जब आप या तो Hammer.js या Fastclick .js का उपयोग करते हैं। यह एक बड़ी समस्या है यदि आपकी साइट में एक न्यूज़फ़ीड या एक इंटरफ़ेस है जहां उपयोगकर्ता बहुत स्क्रॉल करेंगे (अधिकांश वेब ऐप की तरह प्रतीत होगा)। इस कारण से, मैं फिलहाल इनमें से किसी भी प्लगइन्स का उपयोग नहीं कर रहा हूं।

Question 6

किसी तरह, ज़ूम को अक्षम करना इस छोटी सी देरी को अक्षम करता है। समझ में आता है, क्योंकि तब डबल-टैप की जरूरत नहीं होती है।

मैं मोबाइल वेब पेज पर ज़ूम "अक्षम" कैसे कर सकता हूं?

लेकिन कृपया प्रयोज्य प्रभाव के बारे में पता होना चाहिए। यह ऐप के रूप में डिज़ाइन किए गए वेबपेजों के लिए उपयोगी हो सकता है, लेकिन इसका उपयोग अधिक सामान्य-उद्देश्य वाले 'स्थैतिक' पृष्ठों के लिए नहीं किया जाना चाहिए। मैं इसे एक पालतू परियोजना के लिए उपयोग करता हूं जिसे कम विलंबता की आवश्यकता होती है।

Question 7

दुर्भाग्य से ऐसा करने का कोई आसान तरीका नहीं है। तो बस का उपयोग कर touchstartया touchendआप अन्य समस्याओं के साथ छोड़ देंगे जैसे कि किसी ने स्क्रॉल करना शुरू किया जब उदाहरण के लिए एक बटन पर क्लिक करें। हम थोड़ी देर के लिए जिप्टो का उपयोग करते हैं, और यहां तक कि वास्तव में अच्छे ढांचे के साथ कुछ मुद्दे हैं जो समय के साथ सामने आए। उनमें से बहुत से बंद हैं , लेकिन ऐसा लगता है कि यह सरल समाधान का क्षेत्र नहीं है।

हमारे पास विश्व स्तर पर लिंक पर क्लिक करने के लिए इसका समाधान है:

   $(document.body).
    on('tap', 'a',function (e) {
      var href = this.getAttribute('href');
      if (e.defaultPrevented || !href) { return; }
      e.preventDefault();
      location.href= href;
    }).
    on('click', 'a', function (e) {
      e.preventDefault();
    });

Question 8

मैंने jquery के बिना और फास्टक्लिक लाइब्रेरी के बिना एक आसान तरीका खोजा। यह मेरे लिए काम करता है:

var keyboard = document.getElementById("keyboard");
var buttons = keyboard.children;
var isTouch = ("ontouchstart" in window);
for (var i=0;i<buttons.length;i++) {
    if ( isTouch ) {
        buttons[i].addEventListener('touchstart', clickHandler, false);         
    } else {
        buttons[i].addEventListener('click', clickHandler, false);          
    }
}

Question 9

बस कुछ अतिरिक्त जानकारी प्रदान करने के लिए।

IOS 10 पर, <button>मेरे पेज पर लगातार ट्रिगर नहीं किया जा सकता है। हमेशा एक अंतराल था।

मैंने फास्टक्लब / हैमर / टैपज / टचस्टार्ट के साथ क्लिक की जगह लेने की कोशिश की, सब विफल रहा।

अद्यतन: कारण लगता है कि बटन किनारे के बहुत करीब है! केंद्र के पास ले जाएँ और चला गया!

Question 10

आप निष्क्रिय मोड को स्पष्ट रूप से घोषित करने वाले हैं :

window.addEventListener('touchstart', (e) => {

    alert('fast touch');

}, { passive : true});

Question 11

JQuery में आप "टचेंड" ईवेंट को बांध सकते हैं, टैप के बाद डायन ट्रिगर ट्रिगर कोड (कीबोर्ड में कीडाउन की तरह है)। वर्तमान क्रोम और फ़ायरफ़ॉक्स टैबलेट संस्करणों पर परीक्षण किया गया। अपने टच स्क्रीन लैपटॉप और डेस्कटॉप डिवाइस के लिए "क्लिक" भी न भूलें।

jQuery('.yourElements').bind('click touchend',function(event){

    event.stopPropagation();
    event.preventDefault();

	// everything else
});

स्निपेट का विस्तार करें