Jak wywołać zdarzenie dotyku?

Question

Zacznijmy niektórych detektorów zdarzeń:

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); 
}); 

muszę dotknąć programowo dokument w pozycji {pageX: 0, pageY: 0}, przenieść go do {pageX: 0, pageY: 100} i zakończyć dotykowy zdarzenia.

Aby to zrobić, mam zamiar zbudować funkcję pomocnika TouchEvent, która uruchomi zdarzenie dotykowe na podanym elemencie.

/** 
* @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); 
}; 

Upewnię się, że dokument jest załadowany i wysyłam zdarzenia dotykowe reprezentujące wcześniej uzgodniony scenariusz.

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); 
}); 

Spodziewane jest, że touchstart, touchmove i touchend zdarzenia zostały wyzwolone. Nieoczekiwane jest to, że zdarzenie nie zostało wywołane i faktyczne "dotknięcie" dokumentu nie jest odzwierciedlone w bieżącym dokumencie.

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>

Co jest moja konfiguracja brakuje, aby przeglądarka interpretuje zdarzenia dotykowe jakby te zostały wydane przez użytkownika końcowego? Zasadniczo oczekuję, że przeglądarka przewinie się w odpowiedzi na serie uruchomionych programowo zdarzeń startu, ruchu i zakończenia.

Answer 1

Nie jestem pewien, czy dobrze zrozumiałem twoje pytanie, ale jeśli zaczynasz dotykać u góry strony i przeciągasz w dół, próbujesz przewinąć stronę do góry i już tam jest, więc po co uruchamiać przewijanie. Być może zacznij od pozycji {pageX: 0, pageY: 100} i zakończ na {pageX: 0, pageY: 0}, a następnie sprawdź, czy nadal nie działa.

Pozdrawiam, KJ.