stopPropagation and preventDefault

jQuery Mobile

HTML

<!-- Start of first page -->
<div data-role="page" id="foo">
    <div data-role="header">
        	<h1>Foo</h1>

    </div>
    <!-- /header -->
    <div data-role="content">
        <p>Clicking the below link won't take you to the next page</p>
        <p>Swipe left/right to go to next page <a href="#bar" id="barlink">bar</a>
        </p>
    </div>
    <!-- /content -->
    <div data-role="footer">
        	<h4>Page Footer</h4>

    </div>
    <!-- /footer -->
</div>
<!-- /page -->
<!-- Start of second page -->
<div data-role="page" id="bar">
    <div data-role="header">
        	<h1>Bar</h1>

    </div>
    <!-- /header -->
    <div data-role="content">
        <p>I'm the second in the source order so I'm hidden when the page loads. I'm just shown if a link that references my id is beeing clicked.</p>
        <p><a href="#foo">Back to foo</a>
        </p>
    </div>
    <!-- /content -->
    <div data-role="footer">
        	<h4>Page Footer</h4>

    </div>
    <!-- /footer -->
</div>
<!-- /page -->

CSS

#foo div p:nth-child(1) {
    color: red !important;
    font-size: 20px !important;
}
#foo div p:nth-child(2) {
    font-size: 18px !important;
}

JavaScript

if(!(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent))) {
   $(document).ready(function(){
      $(document).on('swipeleft swiperight', 'html', function(event) {
             console.log("IN HERE");
             event.stopPropagation();
             event.preventDefault();
        }); 
   });
}

$(document).on('swipeleft swiperight', function () {
    $.mobile.changePage('#bar');
});