$ (दस्तावेज़) क्लिक .on हैंडलर और मानक क्लिक हैंडलर आईओएस

Question

पर अलग ढंग से व्यवहार कर मैं आम तौर पर फ़ॉर्म का उपयोग करके संचालकों क्लिक बाँध,

$(document).on('click', 'element', function() { ... }); 

तत्वों बाद में लोड किए जाने के साथ मुद्दों से बचने के लिए। यह डेस्कटॉप ब्राउज़र पर सही ढंग से काम कर रहा (और क्रोम iPhone नकल), लेकिन यह काम नहीं कर रहा था एक वास्तविक iPhone पर था (और मैं solutions 'cursor: pointer;' की तरह की कोशिश की)

मैंने देखा है कि एक और बटन काम कर रहा था, मानक का उपयोग हैंडलर पर क्लिक करें। मैंने

$('element').click(function() { ... }); 

का उपयोग करने के लिए अपना नया बटन बदल दिया और यह काम करना शुरू कर दिया। आईओएस पर एक क्लिक हैंडलर अलग-अलग ऑपरेटिंग करने के इन दो तरीकों को क्यों लागू कर रहे हैं?

Answer 1

मैं के रूप में jQuery स्रोत कोड को देखा है, और वे एक ही (दोनों .click और on('click') एक ही समारोह जो .on है का उपयोग कर रहे हैं।

.click

jQuery.each(("blur focus focusin focusout resize scroll click dblclick " + 
    "mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave " + 
    "change select submit keydown keypress keyup contextmenu").split(" "), 
    function(i, name) { 

    // Handle event binding 
    jQuery.fn[ name ] = function(data, fn) { 
     return arguments.length > 0 ? 
      this.on(name, null, data, fn) : 
      this.trigger(name); 
    }; 
}); 

आप देख सकते हैं, $.click अंततः .on (या .trigger पर कॉल करेगा यदि कोई तर्क मौजूद नहीं है जो आपका मामला नहीं है)

Answer 2

मुझे लगता है कि यह मोबाइल ब्राउज़र के लिए 300ms देरी के कारण हो रहा है।

गूगल के अनुसार:

... मोबाइल ब्राउज़रों समय से लगभग इंतजार करेंगे 300 मि.से कि आप क्लिक करें घटना आग बटन टैप करें। इसका कारण है कि ब्राउजर यह देखने का इंतजार कर रहा है कि आप वास्तव में डबल टैप कर रहे हैं या नहीं।

मैं अपने ग्राहक परियोजना में से एक के लिए एक ही मुद्दे का सामना करना पड़ा है और इस के लिए मैं एक भौतिक नल और मोबाइल ब्राउज़रों पर एक क्लिक घटना की गोलीबारी के बीच 300 मि.से देरी को नष्ट करने के लिए https://github.com/ftlabs/fastclick पुस्तकालय का इस्तेमाल किया था।

तुम भी https://github.com/dave1010/jquery-fast-click

कोशिश कर सकते हैं एक ही परियोजना मैं भी ड्रॉपडाउन मेनू का सामना करना पड़ा डबल टैप मुद्दा और भी कारण 300 मि.से देरी था।

एंड्रॉइड ब्राउज़र/उपकरणों में डबल टैप समस्या दिखाई दे रही थी इसलिए मैंने उपयोगकर्ता एजेंट का पता लगाया और उस समस्या को संभालने के लिए एक कस्टम फ़ंक्शन लागू किया जो आपके लिए सहायक हो सकता है।

<?php 
if (user_agent() == 'android') { 
    $handleClick = "onclick=\"checkClicks('$base_url/index.php')\""; 
    $homePage = "#"; 
} else { 
    $handleClick = " "; 
    $homePage = "index.php"; 
} 
?> 

<!--//Script to Handle menu for mobile devices--> 
<script type="text/javascript"> 
//handle 300ms delay click in android devices 
var clicks = 0; 
function checkClicks(e) { 
    clicks = clicks + 1; 
    if (clicks == 2) { 
     window.location = e; 
    } else { 
     //do nothing 
    } 
} 
</script> 

यदि आप सामना करते हैं तो आप इस समस्या को संभालने के लिए कुछ उपलब्ध प्लगइन्स भी आजमा सकते हैं।

https://github.com/dachcom-digital/jquery-doubleTapToGo

https://github.com/zenopopovici/DoubleTapToGo

यह रूप में अच्छी तरह से आप के लिए उपयोगी हो सकता है।

संपादित

ईवेंट हैंडलर एक तत्व उच्च ऊपर डोम पेड़ के लिए बाध्य है (इस मामले में, दस्तावेज़) और जब एक घटना है कि तत्व तक पहुँच जाता चयनकर्ता मिलान एक तत्व पर जन्म लिया हो रही है निष्पादित किया जाएगा ।

यह संभव है क्योंकि अधिकांश डोम घटनाएं मूल के बिंदु से पेड़ को बुलबुला करती हैं। यदि आप #id तत्व पर क्लिक करते हैं, तो एक क्लिक इवेंट जेनरेट किया जाता है जो सभी पूर्वजों के तत्वों के माध्यम से बुलबुला होगा (साइड नोट: वास्तव में एक चरण है जिसे 'कैप्चर चरण' कहा जाता है, जब घटना पेड़ के नीचे आती है लक्ष्य के लिए)।आप उन पूर्वजों पर किसी भी घटना पर कब्जा कर सकते हैं।

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

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

यह शायद की वजह से करने के लिए एक काम नहीं कर रहा:

• jQuery के नवीनतम संस्करण का उपयोग नहीं
• डोम तैयार
• या आप कुछ है जो घटना नहीं करने का कारण बनता कर रहे हैं के अंदर अपना कोड लपेटकर नहीं दस्तावेज़ पर श्रोता तक बुलबुला।

तत्वों के बाद अपने घटना श्रोताओं की घोषणा बनाई गई हैं, जिन पर ईवेंट पर कब्जा करने के लिए - आप एक माता पिता के तत्व या तत्व पदानुक्रम में करने के लिए बाध्य करना चाहिए।

उदाहरण के लिए:

$(document).ready(function() { 
    // This WILL work because we are listening on the 'document', 
    // for a click on an element with an ID of #test-element 
    $(document).on("click","#test-element",function() { 
     alert("click bound to document listening for #test-element"); 
    }); 

    // This will NOT work because there is no '#test-element' ... yet 
    $("#test-element").on("click",function() { 
     alert("click bound directly to #test-element"); 
    }); 

    // Create the dynamic element '#test-element' 
    $('body').append('<div id="test-element">Click mee</div>'); 
}); 

इस उदाहरण में, केवल "दस्तावेज़ करने के लिए बाध्य" चेतावनी सक्रिय हो जाएगा।

JSFiddle with jQuery 1.9.1