How to trigger a touch event?

Question

Let's start with 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 at the position {pageX: 0, pageY: 0} , move it to {pageX: 0, pageY: 100} and complete the touch event.

To do this, I'm going to create a TouchEvent helper function that will trigger a touch event for 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 the document is loaded and sends touch events representing a previously agreed upon 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); }); 

touchstart , touchmove and touchend events are touchstart to touchmove touchend . Unexpectedly, the scroll event was not fired, and the actual “touch” 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> 

That my setting is missing so that the browser interprets touch events as if they were issued by the end user? Essentially, I expect the browser to scroll in response to a series of programmatically triggered touch, move, and end events.

Answer 1

I'm not sure if I understood your question correctly, but if you start touching at the top of the page and dragging, you are trying to scroll up the page and it already exists, so why start scrolling. Perhaps start with the position of {pageX: 0, pageY: 100} and end with {pageX: 0, pageY: 0} , and then see if it still works.

Regards, KJ. A.