Próbując zapobiec jQueryMobile gest machnięcia z pęcherzyków, ale to nie działa

Question

używam jQuery Mobile i stworzył coś, co nieco przypomina Android Holo zakładkach:

http://note.io/18RNMRk

W celu uzyskania gest machnięcia pracować do przełączania między kartami, jest to kod Dodałem:

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

z HTML zakładkach przypominające:

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

Słucham gestu machnięcia na poziomie strony, ponieważ div[data-role=content] może czasami nie wypełniać ekranu pionowo, jeśli nie ma wystarczającej zawartości, aby to zrobić. Gdybym słuchał tego diva i nie zakrywał ekranu, a przesuwałbyś się blisko dna, wydarzenie nie mogło wystrzelić tego diva, to byłoby na stronie głównej (div[data-role=page]).

Oto trójwymiarowa strona Firefoksa tej strony, potwierdzająca powyższe twierdzenie. Mam adnotacją div[data-role=content]:

http://note.io/18RPhyK

Dlatego słucham za to na poziomie strony; ale ponieważ liczba zakładek może przewijać się poza rzutnię (jak widać powyżej: niedziela jest poza ekranem po prawej), chciałbym, żeby użytkownik mógł również przewijać w poziomie. Mam już działające poziome przewijanie (to tylko niektóre proste CSS), ale problem polega na tym, że nawet z moim e.stopPropagation() widzianym powyżej gest przesuwania jest bulgotanie do elementu strony, a mój gest machnięcia uniemożliwia płynne przewijanie był dostępny, zanim dodałem gest machnięcia.

Czy nie rozumiem, jak działa bulgotanie zdarzeń lub jak go zatrzymać w tym scenariuszu?

Answer 1

Znalazłem obejście, ale rzeczywiste rozwiązanie byłoby lepsze.

Ponieważ problem jest taki, że nie ma pojemnik, który wypełnia te dwa wymagania:

1. zawierają zawartości strony, nie zastosowanie klapki
2. min wysokości zawsze pionowo wypełnić ekran

postanowiłem dodać otoki:

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

ja już ruch d mój gest machnięcia przywiązanie do tego nowego opakowania i usunięciu słuchacza bezstykowa z paska zakładka:

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

A żeby mieć pewność, że zawsze wypełnia ekran, za każdym razem, gdy strona jest załadowany, ustawić jego min- wysokość do obliczonej wysokości rzutni minus górne przesunięcie opakowania:

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

Dokładnie to, czego chcę. Mogę przesuwać zawartość strony, aby przełączać karty, i mogę przewijać karty w poziomie, bez aktywowania gestu machnięcia.

Dla wszystkich zainteresowanych w osiągnięciu takiego samego efektu, oto moja 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; 
     } 
    } 
}