title: touchend handler fires twice
body: <p>On a webapp on iOS, I have a bunch of buttons that respond only to touchend (as a shortcut to the click delay in mobile safari). When I stick an alert in the handler, then a subsequent tap of any other button on the page fires this original handler even though they have their own handlers. Here's some sample code that illustrates the problem:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;" /&gt;
  &lt;meta name="apple-mobile-web-app-capable" content="yes" /&gt;
  &lt;meta name="apple-mobile-web-app-status-bar-style" content="default" /&gt;
  
  &lt;script type="text/javascript"&gt;
  
  function clickAlert(evt) {
      alert('btn clicked');
  }
  
  function clickData(evt) {
      var div;
  
      div = document.getElementById('data');
      div.innerHTML += 'btn2 click: ' + (new Date().getTime()) + '&lt;br/&gt;';
  }
  
  function loadHandler() {
      var btn;
  
      btn = document.getElementById('btn-click-alert');
      btn.addEventListener('touchend', clickAlert, false);
      btn = document.getElementById('btn-noclick');
      btn.addEventListener('touchend', clickData, false);
  }
  
  window.addEventListener('load', loadHandler, false);
  &lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;button id="btn-click-alert"&gt;Click to alert&lt;/button&gt;
  &lt;button id="btn-noclick"&gt;No alert here&lt;/button&gt;
  &lt;div id="data"&gt; &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Can someone help?</p>
  
  <p>Thanks!</p>