Wie kann man erkennen, dass ein Benutzer mit dem Finger in eine bestimmte Richtung über eine Webseite mit JavaScript gestrichen hat?
Ich habe mich gefragt, ob es eine Lösung gibt, die sowohl für Websites auf dem iPhone als auch auf einem Android-Telefon funktionieren würde.
Einfaches Vanilla-JS-Codebeispiel:
document.addEventListener('touchstart', handleTouchStart, false);
document.addEventListener('touchmove', handleTouchMove, false);
var xDown = null;
var yDown = null;
function getTouches(evt) {
return evt.touches || // browser API
evt.originalEvent.touches; // jQuery
}
function handleTouchStart(evt) {
const firstTouch = getTouches(evt)[0];
xDown = firstTouch.clientX;
yDown = firstTouch.clientY;
};
function handleTouchMove(evt) {
if ( ! xDown || ! yDown ) {
return;
}
var xUp = evt.touches[0].clientX;
var yUp = evt.touches[0].clientY;
var xDiff = xDown - xUp;
var yDiff = yDown - yUp;
if ( Math.abs( xDiff ) > Math.abs( yDiff ) ) {/*most significant*/
if ( xDiff > 0 ) {
/* right swipe */
} else {
/* left swipe */
}
} else {
if ( yDiff > 0 ) {
/* down swipe */
} else {
/* up swipe */
}
}
/* reset values */
xDown = null;
yDown = null;
};Getestet unter Android.
Einfaches Vanilla-JS-Beispiel für horizontales Streichen:
let touchstartX = 0
let touchendX = 0
const slider = document.getElementById('slider')
function handleGesture() {
if (touchendX < touchstartX) alert('swiped left!')
if (touchendX > touchstartX) alert('swiped right!')
}
slider.addEventListener('touchstart', e => {
touchstartX = e.changedTouches[0].screenX
})
slider.addEventListener('touchend', e => {
touchendX = e.changedTouches[0].screenX
handleGesture()
})Die gleiche Logik können Sie auch für das vertikale Streichen verwenden.
Ich habe ein paar der Antworten hier in ein Skript integriert, das CustomEvent um Swiped-Ereignisse im DOM auszulösen. Fügen Sie die 0.7k swiped-events.min.js Skript auf Ihrer Seite und warten Sie auf geswiped Veranstaltungen:
document.addEventListener('swiped', function(e) {
console.log(e.target); // the element that was swiped
console.log(e.detail.dir); // swiped direction
});document.addEventListener('swiped-left', function(e) {
console.log(e.target); // the element that was swiped
});document.addEventListener('swiped-right', function(e) {
console.log(e.target); // the element that was swiped
});document.addEventListener('swiped-up', function(e) {
console.log(e.target); // the element that was swiped
});document.addEventListener('swiped-down', function(e) {
console.log(e.target); // the element that was swiped
});Sie können auch direkt an ein Element anhängen:
document.getElementById('myBox').addEventListener('swiped-down', function(e) {
console.log(e.target); // the element that was swiped
});Sie können die folgenden Attribute angeben, um die Funktionen der Wischinteraktion auf Ihrer Seite zu optimieren (diese sind fakultativ) .
<div data-swipe-threshold="10"
data-swipe-timeout="1000"
data-swipe-ignore="false">
Swiper, get swiping!
</div>Um Standardwerte für die gesamte Anwendung festzulegen, setzen Sie die Konfigurationsattribute auf das oberste Element:
<body data-swipe-threshold="100" data-swipe-timeout="250">
<div>Swipe me</div>
<div>or me</div>
</body>Der Quellcode ist verfügbar unter Github
Ausgehend von der Antwort von @givanse könnte man das folgendermaßen machen classes :
class Swipe {
constructor(element) {
this.xDown = null;
this.yDown = null;
this.element = typeof(element) === 'string' ? document.querySelector(element) : element;
this.element.addEventListener('touchstart', function(evt) {
this.xDown = evt.touches[0].clientX;
this.yDown = evt.touches[0].clientY;
}.bind(this), false);
}
onLeft(callback) {
this.onLeft = callback;
return this;
}
onRight(callback) {
this.onRight = callback;
return this;
}
onUp(callback) {
this.onUp = callback;
return this;
}
onDown(callback) {
this.onDown = callback;
return this;
}
handleTouchMove(evt) {
if ( ! this.xDown || ! this.yDown ) {
return;
}
var xUp = evt.touches[0].clientX;
var yUp = evt.touches[0].clientY;
this.xDiff = this.xDown - xUp;
this.yDiff = this.yDown - yUp;
if ( Math.abs( this.xDiff ) > Math.abs( this.yDiff ) ) { // Most significant.
if ( this.xDiff > 0 ) {
this.onLeft();
} else {
this.onRight();
}
} else {
if ( this.yDiff > 0 ) {
this.onUp();
} else {
this.onDown();
}
}
// Reset values.
this.xDown = null;
this.yDown = null;
}
run() {
this.element.addEventListener('touchmove', function(evt) {
this.handleTouchMove(evt).bind(this);
}.bind(this), false);
}
}Sie können ihn dann wie folgt verwenden:
// Use class to get element by string.
var swiper = new Swipe('#my-element');
swiper.onLeft(function() { alert('You swiped left.') });
swiper.run();
// Get the element yourself.
var swiper = new Swipe(document.getElementById('#my-element'));
swiper.onLeft(function() { alert('You swiped left.') });
swiper.run();
// One-liner.
(new Swipe('#my-element')).onLeft(function() { alert('You swiped left.') }).run();
Ich habe herausgefunden, dass die Antwort von @givanse die zuverlässigste und kompatibelste für mehrere mobile Browser ist, um Wischbewegungen zu registrieren.
Es ist jedoch eine Änderung in seinem Code erforderlich, damit es in modernen mobilen Browsern funktioniert, die die jQuery .
event.touches wird nicht existieren, wenn jQuery wird verwendet und führt zu undefined und sollte ersetzt werden durch event.originalEvent.touches . Ohne jQuery , event.touches sollte gut funktionieren.
Die Lösung lautet also,
document.addEventListener('touchstart', handleTouchStart, false);
document.addEventListener('touchmove', handleTouchMove, false);
var xDown = null;
var yDown = null;
function handleTouchStart(evt) {
xDown = evt.originalEvent.touches[0].clientX;
yDown = evt.originalEvent.touches[0].clientY;
};
function handleTouchMove(evt) {
if ( ! xDown || ! yDown ) {
return;
}
var xUp = evt.originalEvent.touches[0].clientX;
var yUp = evt.originalEvent.touches[0].clientY;
var xDiff = xDown - xUp;
var yDiff = yDown - yUp;
if ( Math.abs( xDiff ) > Math.abs( yDiff ) ) {/*most significant*/
if ( xDiff > 0 ) {
/* left swipe */
} else {
/* right swipe */
}
} else {
if ( yDiff > 0 ) {
/* up swipe */
} else {
/* down swipe */
}
}
/* reset values */
xDown = null;
yDown = null;
};Getestet am:
CodeJaeger ist eine Gemeinschaft für Programmierer, die täglich Hilfe erhalten..
Wir haben viele Inhalte, und Sie können auch Ihre eigenen Fragen stellen oder die Fragen anderer Leute lösen.
