title: How to stop touch event from falling through on overlay object in web browser for mobile device?
body: <p>Clicking SetCore will add events to objects. If you touch inside <code>core</code> it will start timer and display length of time touched <code>coreText</code>. When you touch on the black box <code>coreObject</code> the touch falls through to <code>core</code>.</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;title&gt;TouchTest&lt;/title&gt;
  &lt;style&gt;
  *, html, body{
      -webkit-touch-callout: none;
      -webkit-user-select: none;
      -khtml-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
  }
  &lt;/style&gt;
  &lt;script&gt;
  
  var arrTimers = [];
  
  function Timer(){
      this.t; 
      this.count = 0;
  
      this.start = function(){
          console.log("starting");
          this.count = 0;
          this.t = setInterval(this.add.bind(this), 50);
      }
      this.add = function(){
          this.count++;
          console.log(this.count);
      }
  
      this.stop = function(){
          console.log("stopping");
          clearInterval(this.t);
      }
  }
  
  function setCore(){
      document.getElementById('coreText').innerHTML = "objects set";
  
      document.getElementById('core').addEventListener('touchstart', function(ev) {
          if(ev.target.id in arrTimers){
              arrTimers[ev.target.id].stop();
          }else{
              arrTimers[ev.target.id] = new Timer();
          }
          arrTimers[ev.target.id].start();
          document.getElementById('coreText').innerHTML = "touchstart";
          console.log(arrTimers[ev.target.id]);
      }, false);
  
      document.getElementById('core').addEventListener('touchend', function(ev) {
          var count;
          if(ev.target.id in arrTimers){
              arrTimers[ev.target.id].stop();
              count = arrTimers[ev.target.id].count;
          }
          document.getElementById('coreText').innerHTML = count;
      }, false);
  
      document.getElementById('coreObject').addEventListener('touchstart', function(ev) {
          document.getElementById('coreText').innerHTML = ev.target.id;
      }, false);
  }
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div onclick="setCore()"&gt;SetCore&lt;/div&gt;
   &lt;div id="core" style="display:block; position:relative; top:50px; left:20px; width:200px; height:200px; border:1px solid #000000;"&gt;
      &lt;div id="coreObject" style="display:block; position:absolute; top:90px; left:80px; width:80px; height:30px; border:1px solid #000000; background-color:#000000;"&gt;&lt;/div&gt;
      &lt;div id="coreText" style="display:block; position:absolute; top:30px; left:15px; width:110px; height:30px; border:1px solid #000000;"&gt;&lt;/div&gt;
  &lt;/div&gt; 
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>How can I stop the touch event on  <code>&lt;div id="coreObject"&gt;</code> from falling through?</p>