title: How to trigger a touch event?
body: <p>Lets start with some event listeners:</p>
  
  <pre><code>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);
  });
  </code></pre>
  
  <p>I need to programmatically touch the document in position <code>{pageX: 0, pageY: 0}</code>, move it to <code>{pageX: 0, pageY: 100}</code> and end the touch event.</p>
  
  <p>To do this, I am going to build a helper function <code>TouchEvent</code> that will trigger the touch event on the specified element.</p>
  
  <pre><code>/**
   * @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);
  };
  </code></pre>
  
  <p>I am going to make sure that the document is loaded and dispatch the touch events representing earlier agreed scenario.</p>
  
  <pre><code>document.addEventListener('DOMContentLoaded', function() {
      var identifier = new Date().getTime(),
          element = document,
          i = 0;
  
      touchEvent(element, 'touchstart', identifier, 0, 0);
      while (i++ &lt; 100) {
          touchEvent(element, 'touchmove', identifier, 0, i);
      }
      touchEvent(element, 'touchend', identifier, 0, i);
  });
  </code></pre>
  
  <p>The expected is that <code>touchstart</code>, <code>touchmove</code> and <code>touchend</code> events have been triggered. The unexpected is that <code>scroll</code> event has not been triggered and the actual "touching" of the document is not reflected in the current document.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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++ &lt; 100) {
          touchEvent(element, 'touchmove', identifier, 0, i);
      }
      touchEvent(element, 'touchend', identifier, 0, i);
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#playground {
      background: #999; height: 5000px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="playground"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>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.</p>