title: How can I make touch events (on the dom) bubble in javascript?
body: <p>It looks to me like touch events just don't bubble, even tho <a href="https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent" rel="nofollow">everyone seems to say or imply that they do</a>. I've tested on Chrome 29.0.1547.62 (using the "emulate touch events" override) and android webview (using cordova), neither have event bubbling happening for the touchstart event. Here's an example:</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta http-equiv="content-type" content="text/html; charset=UTF-8"&gt;
  
      &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;style&gt;
          #a {
              background-color: red;
              position: absolute;
              top: 0px;
              height: 100px;
              width: 100%;
          }
          #b {
              background-color: blue;
              position: absolute;
              top: 0px;
              height: 50px;
              width: 100%;
          }
      &lt;/style&gt;
      &lt;script&gt;
          $(function() {
              $('#a').on('touchstart', function(){
                  console.log("a start")
              })
  
              $('#b').on('touchstart', function(){
                  console.log("b start")
              })
          })
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="a"&gt;&lt;/div&gt;
  &lt;div id="b"&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Even tho b is on top of a, only b's touchstart event gets triggered when b is touched. Whats going on?</p>