title: Accessibility (Voice over ) and iOS 8 safari - events
body: <p>This is regarding events when accessibility is switched on.</p>
  
  <p>The code is like this; when accessibility is switched on and touch event get registered events are not firing. If I don't register touch events then everything is working fine.</p>
  
  <p>Am I missing anything?</p>
  
  <p>This code is working iOS 7 and below, but the problem is only iOS 8 and above (up to latest version).</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html &gt;
  &lt;head&gt;
      &lt;meta name=viewport content="width=device-width, initial-scale=1"&gt;
      &lt;title&gt;&lt;/title&gt;
      &lt;style&gt;
          .displayTable{
      display:table;
      table-layout:fixed;
      border-collapse:collapse;
  }                 
  .displayRow{
      display:table-row;
  }                  
  .displayCell{
      display:table-cell;
      white-space:nowrap;
  }    
  
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="outparent"&gt;
          
      &lt;/div&gt;
      &lt;script&gt;
  
          var p1 = document.getElementById('outparent');
  
          function enableTouchEvents() {
  
              p1.addEventListener('touchstart', onTouch);
              p1.addEventListener('touchmove', onTouch);
              p1.addEventListener('touchend', onTouch);
  
          }
          function removeTouchEvents() {
              p1.removeEventListener('touchstart', onTouch);
              p1.removeEventListener('touchmove', onTouch);
              p1.removeEventListener('touchend', onTouch);
  
          }
          function render() {
              var str = '&lt;form id="form"&gt; \
                  &lt;div id="inparent"&gt; \
                      &lt;div style="table-layout:fixed;display:table" &gt; \
                             &lt;div style="display:table-row" &gt;\
                             &lt;div style="display:table-cell"&gt;       \
                                  &lt;input id="b2" value="submit me!" type="submit" /&gt; \
                              &lt;/div&gt;&lt;/div&gt; \
                      &lt;div style="display:table-row"&gt;\
                             &lt;div style="display:table-cell"&gt;       \
                                  &lt;input id="b1" value="click me!" type="button" /&gt; \
                              &lt;/div&gt;&lt;/div&gt; \
                      &lt;/div&gt; \
                  &lt;/div&gt; \
              &lt;/form&gt;';
  
              
              p1.innerHTML = str;
             
  
          }
  
          p1.addEventListener('click', function (e) {
              //console.log('out clicked  ' + e.target.id);
                       alert('you clicked on ' + e.target.id);
              e.preventDefault();
              
              
          });
          function onTouch(e) {
              console.log('event type ' + e.type + '  ' + e.timeStamp);
              
          }
          render();
         // comment this everything works fine.
          enableTouchEvents();
  
          
  
      &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  
   </code></pre>
  </div>
  </div>
  </p>