Đang cố gắng để ngăn chặn jQueryMobile swipe cử chỉ từ bọt, nhưng nó không làm việc

Question

Tôi đang sử dụng jQuery Mobile và tạo ra cái gì đó hơi giống với Android Holo Tabs:

http://note.io/18RNMRk

Để có được những cử chỉ swipe để làm việc để chuyển đổi giữa các tab, đây là đoạn code tôi đã thêm:

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

với HTML tab giống như:

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

Tôi đang nghe cử chỉ vuốt ở cấp trang vì div[data-role=content] đôi khi không thể lấp đầy màn hình theo chiều dọc, nếu không có đủ nội dung để làm như vậy. Nếu tôi nghe trên div này và nó không bao gồm màn hình, và bạn đã quét gần phía dưới, sự kiện sẽ không cháy trên div này, nó sẽ được trên trang gốc (div[data-role=page]).

Đây là kết xuất đồ họa 3D của Firefox cho trang đó để minh chứng xác nhận trên. Tôi đã chú thích div[data-role=content]:

http://note.io/18RPhyK

Vì lý do đó, tôi đang nghe cho nó ở cấp độ trang; nhưng vì số lượng tab có thể cuộn ra khỏi khung nhìn (như đã thấy ở trên: Chủ nhật ở bên phải màn hình), tôi muốn người dùng có thể cuộn theo chiều ngang. Tôi đã có cuộn ngang làm việc (đó chỉ là một số CSS đơn giản), nhưng vấn đề là, ngay cả với e.stopPropagation() của tôi đã thấy ở trên, cử chỉ vuốt là sủi bọt lên đến phần tử trang và cử chỉ vuốt của tôi ngăn cản việc cuộn trơn tru đã có sẵn trước khi tôi thêm cử chỉ vuốt.

Tôi có hiểu lầm về cách hoạt động của sự kiện sôi nổi hay cách dừng hoạt động trong trường hợp này?

Answer 1

Tôi đã tìm được cách giải quyết, nhưng giải pháp thực tế sẽ tốt hơn.

Kể từ khi vấn đề là tôi không có một container mà lấp đầy hai yêu cầu sau đây:

1. chứa nội dung trang, nhưng không phải là các tab
2. sử dụng min-height luôn lấp đầy màn hình theo chiều dọc

tôi quyết định thêm một 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> 

tôi đã di chuyển d tập tin đính kèm cử chỉ swipe của tôi để wrapper mới này và loại bỏ người nghe vuốt từ thanh tab:

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

Và để chắc chắn rằng nó luôn lấp đầy màn hình, mỗi khi trang web được tải, tôi đặt nó min- chiều cao cho chiều cao tính toán của chế độ xem trừ đi phần bù đầu của trình bao bọc:

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

Điều này thực sự chính xác những gì tôi muốn. Tôi có thể vuốt trên nội dung trang để chuyển đổi các tab và tôi có thể cuộn theo chiều ngang các tab mà không cần kích hoạt cử chỉ vuốt.

Đối với bất cứ ai quan tâm đến việc đạt được tác dụng tương tự, đây là LESSCSS tôi:

#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; 
     } 
    } 
}