Попытка предотвратить пузырение жеста смахивания jQueryMobile, но это не работает

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

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

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>

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

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