Пытаясь предотвратить jQueryMobile салфетки жест из кипящий, но это не работает

Question

Я использую JQuery Mobile и создали что-то, что несколько напоминает Android Holo Вкладки:

http://note.io/18RNMRk

Для того, чтобы получить салфетки жест, чтобы работать для переключения между вкладками, это код, я добавил:

$("#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); 
}); 

С HTML вкладки, напоминающие:

<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[data-role=content] может иногда не заполнять экран по вертикали, если для этого недостаточно контента. Если бы я слушал этот div, и он не закрывал экран, и вы промахнулись вплотную к дну, событие не загорелось бы на этом div, это было бы на корневой странице (div[data-role=page]).

Это 3D-рендеринг Firefox этой страницы для подтверждения вышеуказанного утверждения. Я аннотированный div[data-role=content]:

http://note.io/18RPhyK

По этой причине, я слушаю для него на уровне страницы; но так как количество вкладок может прокручиваться из окна просмотра (как видно выше: воскресенье за ​​пределами экрана справа), я хотел бы, чтобы пользователь мог прокручивать это по горизонтали. У меня уже работает горизонтальная прокрутка (это всего лишь простой CSS), но проблема в том, что даже с моим e.stopPropagation(), описанным выше, жест взлома поднимается до элемента страницы, и мой жест жестов препятствует плавной прокрутке был доступен до того, как я добавил жестом салфетки.

Неужели я не понимаю, как происходит пузырирование событий или как остановить его в этом сценарии?

Answer 1

Я нашел обходное решение, но фактическое решение было бы лучше.

Поскольку проблема в том, что я не контейнер, который заполнит эти два требования:

1. содержат содержимое страницы, но не использовать вкладки
2. мин-высота всегда заполняет экран по вертикали

Я решил добавить обертку:

<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> 

Я ход d мой салфетки жест привязанности к этой новой обертке и удаляются салфетки слушателя из панели вкладок:

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

И для того, чтобы убедиться, что он всегда заполняет экран, каждый раз, когда страница загружена, я установил его мин- высота до расчетной высоты видовом минус вершине обертки смещения:

$("#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'}); 
}); 

Это именно то, что я хочу. Я могу прокручивать содержимое страницы, чтобы переключаться на вкладки, и я могу горизонтально прокручивать вкладки, не активируя жестов салфетки.

Для тех, кто заинтересован в достижении того же эффекта, вот мой 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; 
     } 
     a { 
      padding: 12px 20px 0px 20px; 
      display: block; 
      height: 100%; 
      text-decoration: none; 
     } 
    } 
}