Come attivare un evento tattile?

Question

Iniziamo con alcuni ascoltatori di eventi:

window.addEventListener('scroll', function (e) { 
    console.log('scroll', e); 
}); 
window.addEventListener('touchstart', function (e) { 
    console.log('touchstart', e); 
}); 
window.addEventListener('touchmove', function (e) { 
    console.log('touchmove', e); 
}); 
window.addEventListener('touchend', function (e) { 
    console.log('touchend', e); 
}); 

ho bisogno di toccare il documento di programmazione in posizione {pageX: 0, pageY: 0}, spostarlo in {pageX: 0, pageY: 100} e terminare l'evento tocco.

Per fare ciò, ho intenzione di creare una funzione di supporto TouchEvent che attiverà l'evento tocco sull'elemento specificato.

/** 
* @see https://gist.github.com/sstephenson/448808 
* @see https://developer.apple.com/library/iad/documentation/UserExperience/Reference/TouchEventClassReference/TouchEvent/TouchEvent.html 
* @see http://stackoverflow.com/questions/18059860/manually-trigger-touch-event 
*/ 
function touchEvent (element, type, identifier, pageX, pageY) { 
    var e, 
     touch, 
     touches, 
     targetTouches, 
     changedTouches; 

    touch = document.createTouch(window, element, identifier, pageX, pageY, pageX, pageY); 

    if (type == 'touchend') { 
     touches = document.createTouchList(); 
     targetTouches = document.createTouchList(); 
     changedTouches = document.createTouchList(touch); 
    } else { 
     touches = document.createTouchList(touch); 
     targetTouches = document.createTouchList(touch); 
     changedTouches = document.createTouchList(touch); 
    } 

    e = document.createEvent('TouchEvent'); 
    e.initTouchEvent(type, true, true, window, null, 0, 0, 0, 0, false, false, false, false, touches, targetTouches, changedTouches, 1, 0); 

    window.dispatchEvent(e); 
}; 

Accertarsi che il documento sia caricato e inviare gli eventi di tocco che rappresentano lo scenario concordato in precedenza.

document.addEventListener('DOMContentLoaded', function() { 
    var identifier = new Date().getTime(), 
     element = document, 
     i = 0; 

    touchEvent(element, 'touchstart', identifier, 0, 0); 
    while (i++ < 100) { 
     touchEvent(element, 'touchmove', identifier, 0, i); 
    } 
    touchEvent(element, 'touchend', identifier, 0, i); 
}); 

Il previsto è che touchstart, touchmove e touchend eventi sono stati attivati. L'imprevisto è che l'evento scroll non è stato attivato e che il "tocco" effettivo del documento non si riflette nel documento corrente.

window.addEventListener('scroll', function (e) { 
 
    console.log('scroll', e); 
 
}); 
 
window.addEventListener('resize', function (e) { 
 
    console.log('resize', e); 
 
}); 
 
window.addEventListener('touchstart', function (e) { 
 
    console.log('touchstart', e); 
 
}); 
 
window.addEventListener('touchmove', function (e) { 
 
    console.log('touchmove', e); 
 
}); 
 
window.addEventListener('touchend', function (e) { 
 
    console.log('touchend', e); 
 
}); 
 

 
/** 
 
* @see https://gist.github.com/sstephenson/448808 
 
* @see https://developer.apple.com/library/iad/documentation/UserExperience/Reference/TouchEventClassReference/TouchEvent/TouchEvent.html 
 
* @see http://stackoverflow.com/questions/18059860/manually-trigger-touch-event 
 
*/ 
 
function touchEvent (element, type, identifier, pageX, pageY) { 
 
    var e, 
 
     touch, 
 
     touches, 
 
     targetTouches, 
 
     changedTouches; 
 
    
 
    if (!document.createTouch) { 
 
     throw new Error('This will work only in Safari browser.'); 
 
    } 
 

 
    touch = document.createTouch(window, element, identifier, pageX, pageY, pageX, pageY); 
 
    
 
    if (type == 'touchend') { 
 
     touches = document.createTouchList(); 
 
     targetTouches = document.createTouchList(); 
 
     changedTouches = document.createTouchList(touch); 
 
    } else { 
 
     touches = document.createTouchList(touch); 
 
     targetTouches = document.createTouchList(touch); 
 
     changedTouches = document.createTouchList(touch); 
 
    } 
 

 
    e = document.createEvent('TouchEvent'); 
 
    e.initTouchEvent(type, true, true, window, null, 0, 0, 0, 0, false, false, false, false, touches, targetTouches, changedTouches, 1, 0); 
 

 
    window.dispatchEvent(e); 
 
}; 
 

 
document.addEventListener('DOMContentLoaded', function() { 
 
    var identifier = new Date().getTime(), 
 
     element = document, 
 
     i = 0; 
 

 
    touchEvent(element, 'touchstart', identifier, 0, 0); 
 
    while (i++ < 100) { 
 
     touchEvent(element, 'touchmove', identifier, 0, i); 
 
    } 
 
    touchEvent(element, 'touchend', identifier, 0, i); 
 
});

#playground { 
 
    background: #999; height: 5000px; 
 
}

<div id="playground"></div>

Qual è il mio setup manca per rendere il browser interpretare gli eventi di tocco, come se quelli sono stati emessi da parte dell'utente finale? In sostanza, mi aspetto che il browser scorra in risposta alla serie di eventi di inizio tocco, spostamento e fine attivati ​​a livello di codice.

Answer 1

Non sono sicuro di aver capito correttamente la tua domanda, ma se inizi a toccare la parte superiore della pagina e trascini verso il basso, stai provando a scorrere la pagina verso l'alto ed è già lì, quindi perché lo scorrimento dovrebbe scattare. Magari iniziare dalla posizione {pageX: 0, pageY: 100} e terminare allo {pageX: 0, pageY: 0} e poi vedere se non funziona ancora.

Saluti, KJ.