Ich habe diese Funktion für meine Bedürfnisse.
Fühlen Sie sich frei, es zu benutzen. Funktioniert hervorragend auf mobilen Geräten.
function detectswipe(el,func) {
swipe_det = new Object();
swipe_det.sX = 0; swipe_det.sY = 0; swipe_det.eX = 0; swipe_det.eY = 0;
var min_x = 30; //min x swipe for horizontal swipe
var max_x = 30; //max x difference for vertical swipe
var min_y = 50; //min y swipe for vertical swipe
var max_y = 60; //max y difference for horizontal swipe
var direc = "";
ele = document.getElementById(el);
ele.addEventListener('touchstart',function(e){
var t = e.touches[0];
swipe_det.sX = t.screenX;
swipe_det.sY = t.screenY;
},false);
ele.addEventListener('touchmove',function(e){
e.preventDefault();
var t = e.touches[0];
swipe_det.eX = t.screenX;
swipe_det.eY = t.screenY;
},false);
ele.addEventListener('touchend',function(e){
//horizontal detection
if ((((swipe_det.eX - min_x > swipe_det.sX) || (swipe_det.eX + min_x < swipe_det.sX)) && ((swipe_det.eY < swipe_det.sY + max_y) && (swipe_det.sY > swipe_det.eY - max_y) && (swipe_det.eX > 0)))) {
if(swipe_det.eX > swipe_det.sX) direc = "r";
else direc = "l";
}
//vertical detection
else if ((((swipe_det.eY - min_y > swipe_det.sY) || (swipe_det.eY + min_y < swipe_det.sY)) && ((swipe_det.eX < swipe_det.sX + max_x) && (swipe_det.sX > swipe_det.eX - max_x) && (swipe_det.eY > 0)))) {
if(swipe_det.eY > swipe_det.sY) direc = "d";
else direc = "u";
}
if (direc != "") {
if(typeof func == 'function') func(el,direc);
}
direc = "";
swipe_det.sX = 0; swipe_det.sY = 0; swipe_det.eX = 0; swipe_det.eY = 0;
},false);
}
function myfunction(el,d) {
alert("you swiped on element with id '"+el+"' to "+d+" direction");
}
Um die Funktion es genau wie
detectswipe('an_element_id',myfunction);
detectswipe('an_other_element_id',my_other_function);
verwenden verwenden Wenn ein Swipe die Funktion "myfunction" erfasst wird, wird mit dem Parameter Element-ID und "l, r, u, d" bezeichnet (links rechts hoch runter).
Beispiel: http://jsfiddle.net/rvuayqeo/1/
Vielleicht möchten Sie die Probleme, die Sie mit jGestures hatten, näher erläutern. Ich habe es selbst nicht benutzt, aber es sieht wie eine robuste Version von benutzerdefiniertem Code aus, den ich für einfache Gestenunterstützung geschrieben habe (und anderswo gesehen habe). –
Hinzugefügt in Bearbeitung. – fotuzlab
"Ich wurde empfohlen, JQuery Mobile NICHT zu verwenden." Warum? – givanse