Güzel soru! +1
Bu sorunun FastClick ile ilgisi yoktur, ancak FastClick sorununuzu daha karmaşık hale getirmektedir. Bu yüzden saf JavaScript ve ham Dokunma Olaylarına bağlı kalacağım)
Mobil bir dokunmatik cihazda, web görünümünün uygulanması, platformun belirli nedenlerinden dolayı masaüstü web tarayıcısından önemli ölçüde farklıdır. Bu durumda önemli olan bir özellik web görünümünde hız kaydırmadır. Momentum Scrolling, cihazın donanımsal hızlandırılmış bir özelliğidir. Ekrana kaydırılabilir bir alan dokunduğunda, donanım dokunuşu tanımlar ve kaydırılabilir alana 200 milisaniyelik bir geri sayım sayacı ekler; bu da tetiklendiğinde alanı bir donanım hızlandırmalı kaydırma haline getirir. Donanım durumdayken, donanım hızlandırılmış kaydırmaya özel olduklarından dokunma olayları yayınlanmaz. Zamanlayıcı iptal edilebilir ve sağlanan 200 milisaniyede dokunma olayında preventDefault kullanılarak momentum kaydırma engellenir.
Bu soruna şu şekilde yaklaşıyorum. Yerel kaydırma işlevini kullandığınızı varsayalım: overflow:scroll. Yöntem, yapıştırmak istediğiniz öğeye bir touchstart olayı eklemektir. touchstart olayı tetiklendiğinde, olay işleyicisi hedef öğeye touchend, touchmove ve touchcancel olaylarını ekler. 140ms sonra yeni eklenen olayları kaldıran setTimout zamanlayıcı başlatılır. İşte
benim üretim kodu için bazı klipler şunlardır: Ben koleksiyonlardan olayları ekleme ve kaldırma için iki olay yöntemleri var:
:
Sonra
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
})();
Ben kaydıraç musluk etkinlikleri için tapify yöntemine sahip
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;
})();
Hedef aygıtı tanımlamak için global.isIos kullanıyorum. Android, dokunma olaylarını 200ms'lik web görünümüne göndermeyi durdurdu.
Sonra kullanın eleman veya elemanların bir koleksiyona eklemeyi de:
tapify(document.querySelectorAll('button'), function (e) {
//your event handler here!!
});
Umut bu ... aslında hiç denetimler için çalışmaktan FastClick önleyecek
Teşekkür yardımcı olur. –