title: Stop jQuery Mobile swipe event double bubbling
body: <p>I have jQuery Mobile on iPad Safari and for some reason touch swipe events are firing twice. </p>
  
  <p>People have reported the same problem over the past year as recently as this week but I cannot find an explanation for how to fix the double event without modifying jQuery Mobile and I do not want to do that.  <a href="http://forum.jquery.com/topic/double-event-firing-on-swipeleft-and-swiperight-events" rel="nofollow noreferrer">Thread on jQuery forums</a></p>
  
  <p>The follwoing element bindings for the swipe handler all have the same incorrect double-event result where the alert is called twice for every one swipe.</p>
  
  <p><strong>How should jQuery Mobile touch events be bound in order to avoid double bubbling?</strong></p>
  
  <pre><code>// Test 1: Binding directly to document with delegate()
  $(document).delegate(document, 'swipeleft swiperight', function (event) {
      alert('You just ' + event.type + 'ed!');
  });
  
  
  // Test 2: Binding to document with on() handler recommended as of 1.7 with and without preventDefault
  $(document).on('swipeleft',function(event, data){
      event.preventDefault();
      alert('You just ' + event.type + 'ed!');
  });
  
  
  // Test 3: Binding to body with on() with and without event.stopPropagation 
  $('body').on('swipeleft',function(event, data){
     event.stopPropagation();
     alert('You just ' + event.type + 'ed!');
  });
  
  
  // Test 4: Binding to div by class
  $('.container').on('swipeleft',function(event, data){
     event.stopPropagation();
     alert('You just ' + event.type + 'ed!');
  });
  </code></pre>