Détecter un coup de doigt via JavaScript sur iPhone et Android
Comment pouvez-vous détecter qu'un utilisateur a fait glisser son doigt dans une direction sur une page Web avec JavaScript?
Je me demandais s'il existait une solution qui fonctionnerait pour les sites Web à la fois sur l'iPhone et sur un téléphone Android.
Exemple de code Simple Vanilla JS:
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 ) {
/* left swipe */
} else {
/* right swipe */
}
} else {
if ( yDiff > 0 ) {
/* up swipe */
} else {
/* down swipe */
}
}
/* reset values */
xDown = null;
yDown = null;
};
Testé sous Android.
J'ai trouvé ce plugin jquery touchwipe qui fonctionne aussi bien sur mon iPod touch de première génération que sur mon droïde . http://www.netcu.de/jquery-touchwipe-iphone-ipad-library }
D'après la réponse de @ givanse, voici comment vous pouvez le faire avec 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);
}
}
Vous pouvez ensuite l'utiliser comme ceci:
// 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();
Avez-vous essayé hammer.js? http://eightmedia.github.com/hammer.js/ Fonctionne également sur les téléphones Windows.
ce que j’ai déjà utilisé est que vous devez détecter l’événement mousedown, enregistrer son emplacement x, y (selon le cas), puis détecter l’événement mouseup et soustraire les deux valeurs.
jQuery Mobile inclut également un support par balayage: http://api.jquerymobile.com/swipe/
Exemple
$("#divId").on("swipe", function(event) {
alert("It's a swipe!");
});
J'ai trouvé @givanse brillant comme étant le moyen le plus fiable et le plus compatible entre plusieurs navigateurs mobiles pour enregistrer des actions de balayage.
Toutefois, son code doit être modifié pour que cela fonctionne dans les navigateurs mobiles modernes qui utilisent jQuery.
event.touchesn'existe pas si jQuery est utilisé et donne undefined et doit être remplacé par event.originalEvent.touches. Sans jQuery, event.touches devrait fonctionner correctement.
Alors la solution devient,
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;
};
Testé sur:
- Android : Chrome, Navigateur UC
- iOS : Safari, Chrome, Navigateur UC
J'ai reconditionné TouchWipe en tant que plugin jquery court: detectSwipe
J'ai fusionné certaines des réponses ici dans un script qui utilise CustomEvent pour déclencher des événements balayés dans le DOM. Ajoutez le script 0,7k pure-swipe.min.js à votre page et écoutez les événements swiped:
glissé à gauche
document.addEventListener('swiped-left', function(e) {
console.log(e.target); // the element that was swiped
});
glissé à droite
document.addEventListener('swiped-right', function(e) {
console.log(e.target); // the element that was swiped
});
balayé
document.addEventListener('swiped-up', function(e) {
console.log(e.target); // the element that was swiped
});
abattu
document.addEventListener('swiped-down', function(e) {
console.log(e.target); // the element that was swiped
});
Vous pouvez également attacher directement à un élément:
document.getElementById('myBox').addEventListener('swiped-down', function(e) {
console.log(e.target); // the element that was swiped
});
Configuration optionnelle
Vous pouvez spécifier les attributs suivants pour modifier le mode d’interaction du balayage dans votre page (facultatifs).
<div data-swipe-threshold="10"
data-swipe-timeout="1000"
data-swipe-ignore="false">
Swiper, get swiping!
</div>
Le code source est disponible sur Github
seuil, glissement de délai, glissement de bloc.
document.addEventListener('touchstart', handleTouchStart, false);
document.addEventListener('touchmove', handleTouchMove, false);
document.addEventListener('touchend', handleTouchEnd, false);
const SWIPE_BLOCK_ELEMS = [
'swipBlock',
'handle',
'drag-ruble'
]
let xDown = null;
let yDown = null;
let xDiff = null;
let yDiff = null;
let timeDown = null;
const TIME_TRASHOLD = 200;
const DIFF_TRASHOLD = 130;
function handleTouchEnd() {
let timeDiff = Date.now() - timeDown;
if (Math.abs(xDiff) > Math.abs(yDiff)) { /*most significant*/
if (Math.abs(xDiff) > DIFF_TRASHOLD && timeDiff < TIME_TRASHOLD) {
if (xDiff > 0) {
// console.log(xDiff, TIME_TRASHOLD, DIFF_TRASHOLD)
SWIPE_LEFT(LEFT) /* left swipe */
} else {
// console.log(xDiff)
SWIPE_RIGHT(RIGHT) /* right swipe */
}
} else {
console.log('swipeX trashhold')
}
} else {
if (Math.abs(yDiff) > DIFF_TRASHOLD && timeDiff < TIME_TRASHOLD) {
if (yDiff > 0) {
/* up swipe */
} else {
/* down swipe */
}
} else {
console.log('swipeY trashhold')
}
}
/* reset values */
xDown = null;
yDown = null;
timeDown = null;
}
function containsClassName (evntarget , classArr) {
for (var i = classArr.length - 1; i >= 0; i--) {
if( evntarget.classList.contains(classArr[i]) ) {
return true;
}
}
}
function handleTouchStart(evt) {
let touchStartTarget = evt.target;
if( containsClassName(touchStartTarget, SWIPE_BLOCK_ELEMS) ) {
return;
}
timeDown = Date.now()
xDown = evt.touches[0].clientX;
yDown = evt.touches[0].clientY;
xDiff = 0;
yDiff = 0;
}
function handleTouchMove(evt) {
if (!xDown || !yDown) {
return;
}
var xUp = evt.touches[0].clientX;
var yUp = evt.touches[0].clientY;
xDiff = xDown - xUp;
yDiff = yDown - yUp;
}
Certains mods de la réponse la plus haute (je ne peux pas commenter ...) à traiter avec des coups courts
document.addEventListener('touchstart', handleTouchStart, false);
document.addEventListener('touchmove', handleTouchMove, false);
var xDown = null;
var yDown = null;
function handleTouchStart(evt) {
xDown = evt.touches[0].clientX;
yDown = evt.touches[0].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 )>150){ //to deal with to short swipes
if ( Math.abs( xDiff ) > Math.abs( yDiff ) ) {/*most significant*/
if ( xDiff > 0 ) {/* left swipe */
alert('left!');
} else {/* right swipe */
alert('right!');
}
} else {
if ( yDiff > 0 ) {/* up swipe */
alert('Up!');
} else { /* down swipe */
alert('Down!');
}
}
/* reset values */
xDown = null;
yDown = null;
}
};
Si quelqu'un essaie d'utiliser jQuery Mobile sur Android et a des problèmes de détection de balayage avec JQM
(J'en ai eu sur le Xperia Z1, le Galaxy S3, le Nexus 4 et certains téléphones Wiko aussi) cela peut être utile:
//Fix swipe gesture on Android
if(Android){ //Your own device detection here
$.event.special.swipe.verticalDistanceThreshold = 500
$.event.special.swipe.horizontalDistanceThreshold = 10
}
Le balayage sur Android n’a été détecté que s’il s’agissait d’un balayage très long, précis et rapide.
Avec ces deux lignes cela fonctionne correctement
J'ai eu des problèmes avec le touchend handler tirant continuellement pendant que l'utilisateur traînait un doigt autour. Je ne sais pas si cela est dû à quelque chose que je fais mal ou pas, mais je l'ai re-câblé pour accumuler des mouvements avec touchmove et touchend déclenche le rappel.
J'avais également besoin d'un grand nombre de ces instances et j'ai donc ajouté des méthodes d'activation/désactivation.
Et un seuil où un balayage court ne se déclenche pas. Touchez zéro les compteurs à chaque fois.
Vous pouvez changer le target_node à la volée. Activer à la création est facultatif.
/** Usage: */
touchevent = new Modules.TouchEventClass(callback, target_node);
touchevent.enable();
touchevent.disable();
/**
*
* Touch event module
*
* @param method set_target_mode
* @param method __touchstart
* @param method __touchmove
* @param method __touchend
* @param method enable
* @param method disable
* @param function callback
* @param node target_node
*/
Modules.TouchEventClass = class {
constructor(callback, target_node, enable=false) {
/** callback function */
this.callback = callback;
this.xdown = null;
this.ydown = null;
this.enabled = false;
this.target_node = null;
/** move point counts [left, right, up, down] */
this.counts = [];
this.set_target_node(target_node);
/** Enable on creation */
if (enable === true) {
this.enable();
}
}
/**
* Set or reset target node
*
* @param string/node target_node
* @param string enable (optional)
*/
set_target_node(target_node, enable=false) {
/** check if we're resetting target_node */
if (this.target_node !== null) {
/** remove old listener */
this.disable();
}
/** Support string id of node */
if (target_node.nodeName === undefined) {
target_node = document.getElementById(target_node);
}
this.target_node = target_node;
if (enable === true) {
this.enable();
}
}
/** enable listener */
enable() {
this.enabled = true;
this.target_node.addEventListener("touchstart", this.__touchstart.bind(this));
this.target_node.addEventListener("touchmove", this.__touchmove.bind(this));
this.target_node.addEventListener("touchend", this.__touchend.bind(this));
}
/** disable listener */
disable() {
this.enabled = false;
this.target_node.removeEventListener("touchstart", this.__touchstart);
this.target_node.removeEventListener("touchmove", this.__touchmove);
this.target_node.removeEventListener("touchend", this.__touchend);
}
/** Touchstart */
__touchstart(event) {
event.stopPropagation();
this.xdown = event.touches[0].clientX;
this.ydown = event.touches[0].clientY;
/** reset count of moves in each direction, [left, right, up, down] */
this.counts = [0, 0, 0, 0];
}
/** Touchend */
__touchend(event) {
let max_moves = Math.max(...this.counts);
if (max_moves > 500) { // set this threshold appropriately
/** swipe happened */
let index = this.counts.indexOf(max_moves);
if (index == 0) {
this.callback("left");
} else if (index == 1) {
this.callback("right");
} else if (index == 2) {
this.callback("up");
} else {
this.callback("down");
}
}
}
/** Touchmove */
__touchmove(event) {
event.stopPropagation();
if (! this.xdown || ! this.ydown) {
return;
}
let xup = event.touches[0].clientX;
let yup = event.touches[0].clientY;
let xdiff = this.xdown - xup;
let ydiff = this.ydown - yup;
/** Check x or y has greater distance */
if (Math.abs(xdiff) > Math.abs(ydiff)) {
if (xdiff > 0) {
this.counts[0] += Math.abs(xdiff);
} else {
this.counts[1] += Math.abs(xdiff);
}
} else {
if (ydiff > 0) {
this.counts[2] += Math.abs(ydiff);
} else {
this.counts[3] += Math.abs(ydiff);
}
}
}
}
Utilisé deux:
jQuery mobile: fonctionne dans la plupart des cas et spécialement lorsque vous développez une application utilisant un autre plugin jQuery, il est donc préférable d'utiliser les contrôles jQuery mobile pour cela. Visitez-le ici: https://www.w3schools.com/jquerymobile/jquerymobile_events_touch.asp
Temps de marteau ! une des meilleures bibliothèques légères et rapides à base de javascript. Visitez-le ici: https://hammerjs.github.io/
Vous aurez peut-être plus de facilité à implémenter le prototype avec des événements de souris.
Il existe de nombreuses réponses, y compris le haut, à utiliser avec prudence, car elles ne prennent pas en compte les cas Edge, en particulier autour des boîtes de sélection.
Voir:
Vous devrez faire des essais pour intercepter les cas et comportements Edge, tels que le pointeur qui se déplace en dehors de l'élément avant de terminer.
Un balayage est un geste très élémentaire qui consiste en un niveau plus élevé de traitement d'interaction de pointeur d'interface, se situant approximativement entre le traitement des événements bruts et la reconnaissance de l'écriture manuscrite.
Il n’existe pas de méthode exacte pour détecter un balayage ou un coup, bien que la plupart suivent généralement le principe de base consistant à détecter un mouvement sur un élément avec un seuil de distance et de vitesse ou de vitesse. Vous pourriez simplement dire que s'il y a un mouvement de 65% de la taille de l'écran dans une direction donnée dans un temps donné, il s'agit d'un balayage. Exactement où vous tracez la ligne et comment vous la calculez, c'est à vous.
Certains pourraient également l'examiner du point de vue de l'élan dans une direction et de la distance qui le sépare de l'écran lorsque l'élément est relâché. C’est plus clair avec des glissades collantes où l’élément peut être déplacé, puis lors de la libération, il rebondit ou s’échappe de l’écran comme si l’élastique s’était cassé.
C'est probablement l'idéal pour essayer de trouver une bibliothèque de mouvements que vous pouvez soit transférer, soit réutiliser, qui est couramment utilisée pour des raisons de cohérence. Beaucoup d'exemples ici sont excessivement simplistes, enregistrant un coup comme le moindre contact dans n'importe quelle direction.
Android serait le choix évident, mais le problème est tout à fait complexe.
Beaucoup de gens semblent avoir mal interprété la question comme un mouvement dans une direction. Un balayage est un mouvement large et relativement bref dans une seule direction (bien qu’il puisse être arqué et avoir certaines propriétés d’accélération). Une aventure est similaire, bien que son intention soit de propulser avec désinvolture un objet sur une distance raisonnable sous son propre élan.
Les deux sont suffisamment similaires pour que certaines bibliothèques ne puissent fournir que des opérations de défilement ou de balayage, qui peuvent être utilisées de manière interchangeable. Sur un écran plat, il est difficile de séparer véritablement les deux gestes et, d’une manière générale, les gens font les deux (balayer l’écran physique mais lançant l’élément de l’interface utilisateur affichée à l'écran).
Votre meilleure option est de ne pas le faire vous-même. Il existe déjà n grand nombre de bibliothèques JavaScript permettant de détecter des gestes simples .
Exemple Simple Vanilla JS pour un balayage horizontal:
let touchstartX = 0
let touchendX = 0
const slider = document.getElementById('slider')
function handleGesure() {
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
handleGesure()
})
Vous pouvez utiliser à peu près la même logique pour le balayage vertical.
Un exemple d'utilisation avec offset.
// at least 100 px are a swipe
// you can use the value relative to screen size: window.innerWidth * .1
const offset = 100;
let xDown, yDown
window.addEventListener('touchstart', e => {
const firstTouch = getTouch(e);
xDown = firstTouch.clientX;
yDown = firstTouch.clientY;
});
window.addEventListener('touchend', e => {
if (!xDown || !yDown) {
return;
}
const {
clientX: xUp,
clientY: yUp
} = getTouch(e);
const xDiff = xDown - xUp;
const yDiff = yDown - yUp;
const xDiffAbs = Math.abs(xDown - xUp);
const yDiffAbs = Math.abs(yDown - yUp);
// at least <offset> are a swipe
if (Math.max(xDiffAbs, yDiffAbs) < offset ) {
return;
}
if (xDiffAbs > yDiffAbs) {
if ( xDiff > 0 ) {
console.log('left');
} else {
console.log('right');
}
} else {
if ( yDiff > 0 ) {
console.log('up');
} else {
console.log('down');
}
}
});
function getTouch (e) {
return e.changedTouches[0]
}J'ai également fusionné quelques réponses, principalement la première et la seconde avec des classes, et voici ma version:
export default class Swipe {
constructor(options) {
this.xDown = null;
this.yDown = null;
this.options = options;
this.handleTouchStart = this.handleTouchStart.bind(this);
this.handleTouchMove = this.handleTouchMove.bind(this);
document.addEventListener('touchstart', this.handleTouchStart, false);
document.addEventListener('touchmove', this.handleTouchMove, false);
}
onLeft() {
this.options.onLeft();
}
onRight() {
this.options.onRight();
}
onUp() {
this.options.onUp();
}
onDown() {
this.options.onDown();
}
static getTouches(evt) {
return evt.touches // browser API
}
handleTouchStart(evt) {
const firstTouch = Swipe.getTouches(evt)[0];
this.xDown = firstTouch.clientX;
this.yDown = firstTouch.clientY;
}
handleTouchMove(evt) {
if ( ! this.xDown || ! this.yDown ) {
return;
}
let xUp = evt.touches[0].clientX;
let yUp = evt.touches[0].clientY;
let xDiff = this.xDown - xUp;
let yDiff = this.yDown - yUp;
if ( Math.abs( xDiff ) > Math.abs( yDiff ) ) {/*most significant*/
if ( xDiff > 0 && this.options.onLeft) {
/* left swipe */
this.onLeft();
} else if (this.options.onRight) {
/* right swipe */
this.onRight();
}
} else {
if ( yDiff > 0 && this.options.onUp) {
/* up swipe */
this.onUp();
} else if (this.options.onDown){
/* down swipe */
this.onDown();
}
}
/* reset values */
this.xDown = null;
this.yDown = null;
}
}
Ensuite, vous pouvez l’utiliser comme suit:
let swiper = new Swipe({
onLeft() {
console.log('You swiped left.');
}
});
Cela évite des erreurs de console lorsque vous voulez appeler uniquement la méthode "onLeft".
Si vous avez juste besoin de glisser, il est préférable d’utiliser uniquement la pièce dont vous avez besoin .. Ceci devrait fonctionner sur n’importe quel appareil tactile.
C'est ~ 450 octets 'après compression, minification, babel, etc.
J'ai écrit la classe ci-dessous sur la base des autres réponses, elle utilise un pourcentage déplacé au lieu de pixels et un modèle de répartiteur d'événements pour accrocher/décrocher des éléments.
Utilisez-le comme suit:
const dispatcher = new SwipeEventDispatcher(myElement);
dispatcher.on('SWIPE_RIGHT', () => { console.log('I swiped right!') })
export class SwipeEventDispatcher {
constructor(element, options = {}) {
this.evtMap = {
SWIPE_LEFT: [],
SWIPE_UP: [],
SWIPE_DOWN: [],
SWIPE_RIGHT: []
};
this.xDown = null;
this.yDown = null;
this.element = element;
this.options = Object.assign({ triggerPercent: 0.3 }, options);
element.addEventListener('touchstart', evt => this.handleTouchStart(evt), false);
element.addEventListener('touchend', evt => this.handleTouchEnd(evt), false);
}
on(evt, cb) {
this.evtMap[evt].Push(cb);
}
off(evt, lcb) {
this.evtMap[evt] = this.evtMap[evt].filter(cb => cb !== lcb);
}
trigger(evt, data) {
this.evtMap[evt].map(handler => handler(data));
}
handleTouchStart(evt) {
this.xDown = evt.touches[0].clientX;
this.yDown = evt.touches[0].clientY;
}
handleTouchEnd(evt) {
const deltaX = evt.changedTouches[0].clientX - this.xDown;
const deltaY = evt.changedTouches[0].clientY - this.yDown;
const distMoved = Math.abs(Math.abs(deltaX) > Math.abs(deltaY) ? deltaX : deltaY);
const activePct = distMoved / this.element.offsetWidth;
if (activePct > this.options.triggerPercent) {
if (Math.abs(deltaX) > Math.abs(deltaY)) {
deltaX < 0 ? this.trigger('SWIPE_LEFT') : this.trigger('SWIPE_RIGHT');
} else {
deltaY > 0 ? this.trigger('SWIPE_UP') : this.trigger('SWIPE_DOWN');
}
}
}
}
export default SwipeEventDispatcher;