अच्छा सवाल! +1
इस समस्या के पास FastClick से कोई लेना देना नहीं है, लेकिन FastClick आपकी समस्या का समाधान अधिक जटिल बनाता है। तो मैं शुद्ध जावास्क्रिप्ट और कच्चे टच घटनाओं से चिपके रहूंगा)
मोबाइल टच डिवाइस पर वेबव्यू का कार्यान्वयन प्लेटफ़ॉर्म के लिए विशिष्ट कारणों से डेस्कटॉप वेब ब्राउज़र से काफी अलग है। इस मामले में महत्वपूर्ण एक विशेषता वेबव्यू में गति स्क्रॉलिंग है। मोमेंटम स्क्रॉलिंग डिवाइस की एक हार्डवेयर त्वरित सुविधा है। तो जब स्क्रीन पर स्क्रोल करने योग्य क्षेत्र स्पर्श किया जाता है, तो हार्डवेयर स्पर्श को पहचानता है और स्क्रॉल करने योग्य क्षेत्र में 200 मिलीसेकंद उलटी गिनती टाइमर संलग्न करता है, जो ट्रिगर होने पर, क्षेत्र को हार्डवेयर त्वरित स्क्रॉल में डाल देता है। जब हार्डवेयर राज्य में होता है तो यह स्पर्श घटनाओं को प्रसारित नहीं करता है क्योंकि वे हार्डवेयर त्वरित स्क्रॉल के लिए विशिष्ट हैं। टाइमर रद्द किया जा सकता है, और प्रदत्त 200 मिलीसेकंड के भीतर टच इवेंट पर preventDefault का उपयोग करके गति स्क्रॉलिंग को रोका जा सकता है।
यहां इस समस्या से संपर्क किया गया है। मुझे लगता है कि आप देशी स्क्रॉल i.e overflow:scroll का उपयोग कर रहे हैं। विधि उस तत्व को touchstart ईवेंट संलग्न करने के लिए है जिसे आप स्पर्श करना चाहते हैं। एक बार touchstart ईवेंट निकाल दिया गया है, ईवेंट हैंडलर touchend, touchmove और touchcancel ईवेंट तत्व को लक्षित तत्व से जोड़ता है। एक सेटटाइम टाइमर शुरू किया जाता है जो 140 एमएमएस के बाद नए जोड़े गए कार्यक्रमों को हटा देता है।
यहाँ मेरी उत्पादन कोड के लिए कुछ क्लिप हैं: मैं संग्रह से जोड़ने और घटनाओं को हटाने के लिए दो घटना तरीकों:
:
var eventify = (function() {
function eventify(type, el, callback, phase) {
phase = phase || false;
if ((el.constructor.toString().contains('NodeList')) || (el.constructor.toString().contains('HTMLCollection'))) {
[].forEach.call(el, function (element) {
if (!element.hasEvent(type)) {
element.addEvent(type);
HTMLElement.prototype.addEventListener.apply(element, [type, callback, phase]);
}
});
} else {
if (!el.hasEvent(type)) {
el.addEvent(type);
HTMLElement.prototype.addEventListener.apply(el, [type, callback, phase]);
}
}
return callback;
}
return eventify
})();
var uneventify = (function() {
function uneventify(type, el, callback) {
if ((el.constructor.toString().contains('NodeList')) || (el.constructor.toString().contains('HTMLCollection'))) {
[].forEach.call(el, function (element) {
if (element.hasEvent(type)) {
element.removeEvent(type);
HTMLElement.prototype.removeEventListener.apply(element, [type, callback]);
}
});
} else {
if (el.hasEvent(type)) {
el.removeEvent(type);
HTMLElement.prototype.removeEventListener.apply(el, [type, callback]);
}
}
}
return uneventify
})();
तब मैं स्क्रोलर पर घटनाओं नल के लिए एक विधि है tapify
var tapify = (function() {
function tapify(el, callback) {
eventify('touchstart', el, function (e) {
var that = this;
var start = e.pageY;
var target = e.target;
function dynamicEvents() {
var endfn = eventify('touchend', target, function (evt) {
e.preventDefault();
e.stopImmediatePropagation();
evt.preventDefault();
evt.stopImmediatePropagation();
uneventify('touchmove', target, movefn);
uneventify('touchend', target, endfn);
uneventify('touchcancel', target, cancelfn);
callback && callback(target);
});
var cancelfn = eventify('touchcancel', target, function (evt) {
e.preventDefault();
e.stopImmediatePropagation();
evt.preventDefault();
evt.stopImmediatePropagation();
uneventify('touchmove', target, movefn);
uneventify('touchend', target, endfn);
uneventify('touchcancel', target, cancelfn);
callback && callback(target);
});
var movefn = eventify('touchmove', target, function (evt) {
var distance = start - evt.pageY;
if (distance > 20) {
uneventify('touchend', target, endfn);
uneventify('touchcancel', target, cancelfn);
uneventify('touchmove', el, movefn);
}
});
setTimeout(function() {
uneventify('touchmove', target, movefn);
uneventify('touchend', target, endfn);
uneventify('touchcancel', target, cancelfn);
}, 140);
}
if (global.isIos) setTimeout(function() {
dynamicEvents();
}, 60);
else dynamicEvents();
}, false);
}
return tapify;
})();
मैं लक्ष्य डिवाइस की पहचान करने के लिए global.isIos का उपयोग करता हूं। एंड्रॉइड आर्ट 200ms के लिए टच इवेंट भेजना बंद कर देता है।
फिर एक तत्व या तत्वों का एक संग्रह करने के लिए घटना संलग्न करने के लिए, का उपयोग करें:
tapify(document.querySelectorAll('button'), function (e) {
//your event handler here!!
});
आशा इस मदद करता है
धन्यवाद ... कि वास्तव में सब पर नियंत्रण के लिए काम करने से रोका जा सके FastClick। –