web-dev-qa-db-fra.com

déclencher manuellement l'événement tactile

J'ai cherché pendant les 30 dernières minutes, mais je n'ai pas trouvé de solution.

Je veux déclencher un événement touchstart sur un élément.

Cela déclenche l'événement touchstart:

var e = document.createEvent('MouseEvent');

e.initMouseEvent("touchstart", true, true, window, 1, screenX, screenY, clientX, clientY,
    ctrlKey, altKey, shiftKey, metaKey, button, relatedTarget);

target.dispatchEvent(e);

Notez que les variables sont définies par ma fonction

Mais il y a un problème avec ça. L'objet event n'a pas de propriété touches. Donc, quelque chose comme ça ne fonctionnera pas:

var touch = e.touches[0];

Existe-t-il un moyen de déclencher un événement touchstart manuellement (cela devrait fonctionner sur Android> = 4.0 et Chrome avec le tactile activé [DevTools] )?

Veuillez noter que je ne veux PAS utiliser de framework comme jQuery. Avec jQuery, il est facile de créer un touchevent sur un élément;)

javascripteventstouch
26
AndreM96

Selon W3C

var e = document.createEvent('TouchEvent');

Ensuite, changez aussi

e.initMouseEvent();

à

e.initTouchEvent();

Lorsque vous avez créé un événement touchstart.

Le lien W3C dit:

Certains agents utilisateurs implémentent une méthode initTouchEvent dans le cadre de l'interface TouchEvent. Lorsque cette méthode est disponible, les scripts peuvent l'utiliser pour initialiser les propriétés d'un objet TouchEvent, y compris ses propriétés TouchList (qui peuvent être initialisées avec des valeurs renvoyées par createTouchList). La méthode initTouchEvent n'est pas encore standardisée, mais elle pourrait apparaître sous une forme ou une autre dans une future spécification.

Vous devrez donc peut-être recourir à e.initUIEvent('touchstart', true, true);
De plus, la spécification officielle indique également que l'objet TouchList est facultatif , et peut être créé manuellement à l'aide de la commande createTouchList méthode. Pour ajouter un toucher à cette liste, vous devrez appeler la méthode createTouch, où vous passerez toutes les coordonnées et telles :

 6.1 Méthodes 
 
 # CreateTouch 
 Crée un objet Touch avec les attributs spécifiés. 
 Paramètre | Type | Nullable | Facultatif | Description 
 Vue | WindowProxy | ✘ | ✘ | 
 Cible | EventTarget | ✘ | ✘ | 
 Identifiant | long | ✘ | ✘ | 
 PageX | long | ✘ | ✘ | 
 PageY | long | ✘ | ✘ | 
 Écran X | long | ✘ | ✘ | 
 ÉcranY | long | ✘ | ✘ | 
 Type de retour: appuyez sur 
 
 # CreateTouchList 
 Crée un objet TouchList composé de zéro ou plusieurs objets Touch. L'appel de cette méthode sans argument crée une liste de contacts sans objet et de longueur 0 (zéro). 
 
 Paramètre | Type | Nullable | Facultatif | Description 
 Touche | Touchez | ✘ | ✔ | 
 Type de retour: TouchList

Si cela ne fonctionne pas, vous pouvez essayer ceci:

var e = document.createEvent('UIEvent');
e.initUIEvent();

devrait fonctionner, cela a plus de sens que createEvent('MouseEvent') en tout cas ...
Mais à des fins de test, pourquoi ne pas ouvrir votre console chrome et vérifier Emulate touch events, Et remplacer l'agent utilisateur par Android 4 (Ctrl + Maj + j> cliquez sur le coin inférieur droit de l'engrenage et sélectionnez Remplacements, vous y trouverez tous les paramètres dont vous avez besoin)

Étant donné que les événements tactiles ont un long chemin à parcourir, toujours en termes de standardisation, il s'avère que la propriété touches n'est pas pas RO (encore?), Vous pouvez donc utiliser ce correctif rapide (que l'OP a trouvé et utilisé avec le résultat souhaité):

var e = document.createEvent('TouchEvent');
e.touches = [{pageX: pageX, pageY: pageY}];

Ce qui, je pense (je ne peux pas le croire si ce n'était pas le cas) est plus rapide que:

e.touches = e.createTouchList(
    e.createTouch(window, target, 0, pageX, pageY, screenX, screenY)
);
22
Elias Van Ootegem

Je sais que cela a été répondu, mais moi aussi j'ai eu du mal à trouver une réponse à ce problème et la réponse acceptée n'a pas fonctionné pour moi. Au final, la solution que j'ai trouvée est vraiment très simple et prend en charge tous les navigateurs:

var e = new Event('touchstart');
target.dispatchEvent(e);

C'est ça. Rien de plus simple.

12
Derek Henderson

J'ai trouvé cette solution (natif javascript), fonctionne pour moi

var el = document.getElementById('myDivId');
// desktop
el.click();

// mobile
if (window.matchMedia("(max-width: 768px)").matches) {
        // createEvent(), event.initEvent() are Depricated see Ref: [enter link description here][1]
        // var event = document.createEvent("Event"); 
        // event.initEvent("touchstart", false, true);
        // event.initEvent("touchend", false, true);
        // So the solution is:
        var event1 = new Event('touchstart');
        var event2 = new Event('touchend'); 
        el.dispatchEvent(event1); 
        el.dispatchEvent(event2);
  }
1
Theva