How to trigger a touch event?

Question

Lets start with some event listeners:

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

I need to programmatically touch the document in position {pageX: 0, pageY: 0} , move it to {pageX: 0, pageY: 100} and end the touch event.

To do this, I am going to build a helper function TouchEvent that will trigger the touch event on the specified element.

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

I am going to make sure that the document is loaded and dispatch the touch events representing earlier agreed scenario.

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

The expected is that touchstart , touchmove and touchend events have been triggered. The unexpected is that scroll event has not been triggered and the actual "touching" of the document is not reflected in the current document.

 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>

What is my setup missing to make the browser interpret the touch events as if those were issued by the end user? In essence, I am expecting the browser to scroll in response to the series of programmatically triggered touch start, move and end events.

Answer 1

I'm not sure if I understood your question correctly, but if you start touch at the top of page and drag down you're trying to scroll page to top and it's already there so why should the scroll trigger. Perhaps start at position {pageX: 0, pageY: 100} and end at {pageX: 0, pageY: 0} and then see if it's still not working.

Regards, KJ.