Delam na mobilni spletni strani, ki mora delovati na različnih napravah. Trenutno me boli glava zaradi BlackBerry.
Podpirati moramo tako klike s tipkovnico kot tudi dogodke na dotik.
Najbolje bi bilo, če bi samo uporabil:
$thing.click(function(){...})
vendar smo naleteli na težavo, da imajo nekatere naprave blackberry zelo nadležno zakasnitev od trenutka dotika do sprožitve klika.
Rešitev je, da namesto tega uporabimo touchstart:
$thing.bind('touchstart', function(event){...})
Toda kako naj povežem oba dogodka, vendar sprožim samo enega? Še vedno potrebujem dogodek klik za naprave s tipkovnico, seveda pa ne želim, da se dogodek klik sproži, če uporabljam napravo na dotik.
Dodatno vprašanje: Ali je mogoče to narediti in dodatno prilagoditi brskalnike, ki sploh nimajo dogodka touchstart? Pri raziskovanju tega je videti, da operacijski sistem BlackBerry OS5 ne podpira dogodka touchstart, zato se bo treba zanesti tudi na dogodke klik za ta brskalnik.
DODATEK:
Morda bi bilo bolj izčrpno vprašanje:
Ali je z jQueryjem mogoče/priporočljivo z istimi vezavami obravnavati interakcije na dotik in interakcije z miško?
V idealnem primeru je odgovor pritrdilen. Če ne, imam nekaj možnosti:
Za pridobivanje informacij o napravah uporabljamo WURFL, zato bi lahko ustvarili lastno matriko naprav. Odvisno od naprave bomo uporabili touchstart ALI klik.
V brskalniku prek JS zaznavamo podporo za dotik (o tem moram opraviti še nekaj raziskav, vendar se zdi, da je to izvedljivo).
Vendar pa še vedno ostaja eno vprašanje: kaj pa z napravami, ki podpirajo OBE. Nekateri telefoni, ki jih podpiramo (Nokii in BlackBerriesi), imajo zaslone na dotik in tipkovnice. Tako se vrnem nazaj k prvotnemu vprašanju: ali obstaja način, kako omogočiti oboje hkrati?
Posodobitev: Pointer Events Polyfill, ki omogoča vezavo na dogodke "kazalca" namesto izbire med miško & dotikom.
Povežite se z obema, vendar naredite zastavico, da se funkcija sproži samo enkrat na 100 ms ali približno toliko.
var flag = false;
$thing.bind('touchstart click', function(){
if (!flag) {
flag = true;
setTimeout(function(){ flag = false; }, 100);
// do something
}
return false
});
Na splošno ne želite mešati privzetega vmesnika za dotik in vmesnika brez dotika (klik). Ko se enkrat premaknete v svet dotika, je lažje obravnavati samo funkcije, povezane z dotikom. Spodaj je nekaj psevdokode, ki bi naredila to, kar želite.
Če se povežete v dogodek touchmove in sledite lokacijam, lahko v funkcijo doTouchLogic dodate več elementov za zaznavanje gest in še česa.
var touchStartTime;
var touchStartLocation;
var touchEndTime;
var touchEndLocation;
$thing.bind('touchstart'), function() {
var d = new Date();
touchStartTime = d.getTime();
touchStartLocation = mouse.location(x,y);
});
$thing.bind('touchend'), function() {
var d = new Date();
touchEndTime= d.getTime();
touchEndLocation= mouse.location(x,y);
doTouchLogic();
});
function doTouchLogic() {
var distance = touchEndLocation - touchStartLocation;
var duration = touchEndTime - touchStartTime;
if (duration <= 100ms && distance <= 10px) {
// Person tapped their finger (do click/tap stuff here)
}
if (duration > 100ms && distance <= 10px) {
// Person pressed their finger (not a quick tap)
}
if (duration <= 100ms && distance > 10px) {
// Person flicked their finger
}
if (duration > 100ms && distance > 10px) {
// Person dragged their finger
}
}