javascript - Trying to prevent jQueryMobile swipe gesture from bubbling, but it's not working -

i'm using jquery mobile , created resembles android holo tabs:

http://note.io/18rnmrk

in order swipe gesture work switching between tabs, code i've added:

$("#mypage #pagetabs").on('swipeleft swiperight', function(e){     e.stoppropagation();     e.preventdefault(); }); $("#mypage").on('swipeleft', function(){     ui.activities.swipe(1); }).on('swiperight', function(){     ui.activities.swipe(-1); }); 

with tabs' html resembling:

<div id="pagetabs">     <div class="tab">         <a href="#" data-dayofmonth="26">thu</a>     </div>     <div class="tab">         <a href="#" data-dayofmonth="27">fri</a>     </div>     <div class="tab">         <a href="#" data-dayofmonth="28" data-meridian="am">sat am</a>     </div>     <div class="tab">         <a href="#" data-dayofmonth="28" data-meridian="pm">sat pm</a>     </div>     <div class="tab">         <a href="#" data-dayofmonth="29">sun</a>     </div> </div> 

i'm listening swipe gesture @ page-level because div[data-role=content] can not fill screen vertically, if there isn't enough content so. if listened on div , not covering screen, , swiped close bottom, event wouldn't fire on div, on root page (div[data-role=page]).

here's firefox's 3d rendering of page proof of above assertion. i've annotated div[data-role=content]:

http://note.io/18rphyk

for reason, i'm listening @ page level; since number of tabs can scroll out of viewport (as seen above: sunday off-screen right), user able scroll horizontally well. i've got horizontal scrolling working (that's simple css), problem that, e.stoppropagation() seen above, swipe gesture bubbling page element , swipe gesture preventing smooth scrolling available before added swipe gesture.

am misunderstanding how event bubbling works, or how stop in scenario?

i've found workaround, actual solution better.

since problem don't have container fills these 2 requirements:

1. contain page content, not tabs
2. use min-height fill screen vertically

i decided add wrapper:

<div id="pagetabs">     <div class="tab">         <a href="#" data-dayofmonth="26">thu</a>     </div>     <div class="tab">         <a href="#" data-dayofmonth="27">fri</a>     </div>     <div class="tab">         <a href="#" data-dayofmonth="28" data-meridian="am">sat am</a>     </div>     <div class="tab">         <a href="#" data-dayofmonth="28" data-meridian="pm">sat pm</a>     </div>     <div class="tab">         <a href="#" data-dayofmonth="29">sun</a>     </div> </div> <div class="contentwrapper">     <!-- ... --> </div> 

i've moved swipe gesture attachment new wrapper , removed swipe listener tab bar:

$(".contentwrapper").on('swipeleft', function(){     ui.activities.swipe(1); }).on('swiperight', function(){     ui.activities.swipe(-1); }); 

and in order make sure fills screen, every time page loaded, set min-height calculated height of viewport minus wrapper's top offset:

$("#mypage").on('pageshow', function(){      var viewportheight = document.documentelement.clientheight;     var offset = $(".contentwrapper", this)[0].offsettop;      $(".contentwrapper", this).css({'min-height': viewportheight - offset + 'px', 'display': 'block'}); }); 

this want. can swipe on page content switch tabs, , can horizontally scroll tabs without activating swipe gesture.

for interested in achieving same effect, here's lesscss:

#pagetabs {     @tab-highlight: @lightblue;      margin: -15px -15px 15px -15px;     padding: 0;     height: 38px;     overflow-x: scroll;     overflow-y: hidden;     white-space: nowrap;     border-bottom: 2px solid @tab-highlight;      .tab {         display: inline-block;         vertical-align: top;         border-left: 1px solid @tab-highlight;         margin-left: -5px;         height: 100%;          &:first-child {             margin-left: 0;         }         &.active {             height: 32px;             border-bottom: 8px solid @tab-highlight;         }         {             padding: 12px 20px 0px 20px;             display: block;             height: 100%;             text-decoration: none;         }     } }