title: How to get touchEnd to behave just like mouseUp?
body: <p>On <code>mouseUp</code> or <code>touchEnd</code> I want to get the reference of the element on which that event happened.</p>
  
  <p><a href="http://jsfiddle.net/adu9a/" rel="nofollow noreferrer"><strong>Demo</strong></a></p>
  
  <p>In this example, you need to click on one element, drag mouse and released over another element. When the mouse is released, that element's background will change to red. My code works correctly for mouse events, but not on touch devices.</p>
  
  <p>When the <code>touchStart</code> is on one element and the finger is released over another element, I'm getting only the reference to the first element.</p>
  
  <p>What I need to change to make the touch events work exactly like the mouse events?</p>
  
  <pre><code>var isMouseDown = false;    
  
  
  var panel1 = document.getElementById( 'panel1' );
  var panel2 = document.getElementById( 'panel2' );
  
  panel1.onmousedown = onDocumentMouseDown;
  panel1.onmouseup = onDocumentMouseUp;
  panel1.onmousemove = onDocumentMouseMove;   
  panel1.addEventListener( 'touchstart', onDocumentTouchStart, false );
  panel1.addEventListener( 'touchmove', onDocumentTouchMove, false );
  panel1.addEventListener( 'touchend', onDocumentTouchEnd, false );
  
  panel2.onmousedown = onDocumentMouseDown;
  panel2.onmouseup = onDocumentMouseUp;
  panel2.onmousemove = onDocumentMouseMove;
  panel2.addEventListener( 'touchstart', onDocumentTouchStart, false );
  panel2.addEventListener( 'touchmove', onDocumentTouchMove, false );
  panel2.addEventListener( 'touchend', onDocumentTouchEnd, false );
  
  
  
  function onDocumentMouseDown(event) {
      event.preventDefault();
      panel1.style.background="#2E442E";
      panel2.style.background="#5D855C";      
  }
  
  function onDocumentMouseUp(event) {
      event.preventDefault();
      this.style.background="#ff0000";
  }
  
  function onDocumentMouseMove( event ) {
  
  }   
  
  function onDocumentTouchStart( event ) {
      event.preventDefault();
      panel1.style.background="#2E442E";
      panel2.style.background="#5D855C";
  
  }
  
  function onDocumentTouchMove( event ) {     
  
  }
  
  function onDocumentTouchEnd( event ) {
      event.preventDefault();         
      this.style.background="#ff0000";        
  
  }
  </code></pre>