attivazione manuale evento touch

Question

Ho cercato negli ultimi 30 minuti, ma non ho trovato una soluzione.

Voglio attivare un evento touchstart su un elemento.

Questo genera l'evento 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); 

Si noti che le variabili sono definite dalla mia funzione di

Ma c'è un problema con questo. L'oggetto event non ha una proprietà touches. Quindi, qualcosa come questo non funzionerà:

var touch = e.touches[0]; 

Esiste un modo per attivare manualmente un evento touchstart (dovrebbe funzionare su Android> = 4.0 e Chrome con touch abilitata [DevTools])?

Si prega di notare che NON voglio utilizzare alcun framework come jQuery. Con jQuery è facile creare un touchevent su un elemento;)

Answer 1

Secondo W3C

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

Poi, cambia anche

e.initMouseEvent(); 

a

e.initTouchEvent(); 

Come si' ho creato un evento touchstart.

Il link W3C dice:

Some user agents implement an initTouchEvent method as part of the TouchEvent interface. When this method is available, scripts can use it to initialize the properties of a TouchEvent object, including its TouchList properties (which can be initialized with values returned from createTouchList). The initTouchEvent method is not yet standardized, but it may appear in some form in a future specification.

quindi dovrete potrebbe essere necessario ricorrere a e.initUIEvent('touchstart', true, true);
Inoltre, la specifica ufficiale afferma inoltre che l'oggetto è TouchListfacoltativa, e può essere creato manualmente utilizzando il metodo createTouchList. Per aggiungere un tocco a quella lista, dovrete chiamare il metodo createTouch, dove si passa tutte le coordinate e quali:

 
6.1 Methods 

#createTouch 
Creates a Touch object with the specified attributes. 
Parameter | Type  | Nullable | Optional | Description 
view  | WindowProxy | ✘  | ✘  | 
target | EventTarget | ✘  | ✘  | 
identifier| long  | ✘  | ✘  | 
pageX  | long  | ✘  | ✘  | 
pageY  | long  | ✘  | ✘  | 
screenX | long  | ✘  | ✘  | 
screenY | long  | ✘  | ✘  | 
Return type: Touch 

#createTouchList 
Creates a TouchList object consisting of zero or more Touch objects. Calling this method with no arguments creates a TouchList with no objects in it and length 0 (zero). 

Parameter | Type | Nullable | Optional | Description 
touches | Touch |  ✘ | ✔  | 
Return type: TouchList 

Se questo non dovesse funzionare, si potrebbe provare questo:

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

dovrebbe funzionare, ha più senso di createEvent('MouseEvent') in ogni caso ...
Ma a scopo di test, perché non aprire la console di cromo e verificare Emulate touch events, oltre a ignorare user agent ad Android 4. (Ctrl + shift + j> fai clic sull'ingranaggio in basso a destra e seleziona Ov errides, ci troverete tutte le impostazioni necessarie)

Dal momento che i touch-eventi hanno una lunga strada da fare, ancora in termini di diventare standardizzata, si scopre la proprietà touches è non RO (ancora ?), In modo da poter utilizzare questo quick-fix (che il PO trovato e utilizzato con il risultato desiderato):

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

che, credo (non riesco a credere che se non fosse il caso) è più veloce di:

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

Answer 2

possiamo innescare in questo modo:

$playBtn.bind((is_touch_device) ? 'touchstart' : 'click', playfunction); 

Answer 3

so che questo è stato risposto, ma troppo ho faticato a trovare una risposta a questo problema e la risposta accettata non ha funzionato per me. Alla fine, la soluzione che ho trovato è davvero molto semplice e supporta i browser:

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

Questo è tutto. Non potrebbe essere più facile