我正在使用 jQuery Mobile 并创建了一些类似于 Android Holo Tabs 的东西:

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 ]).

这是 Firefox 对该页面的 3D 呈现，以证明上述断言。我注释了 div[data-role=content]:

http://note.io/18RPhyK

因此，我在页面级别监听它；但由于选项卡的数量可以滚出视口(viewport)(如上所示:星期日在屏幕右侧)，我希望用户也能够水平滚动。我已经让水平滚动正常工作(这只是一些简单的 CSS)，但问题是，即使使用上面看到的 e.stopPropagation()，滑动手势也会冒泡到页面元素和我的滑动手势阻止了在我添加滑动手势之前可用的平滑滚动。

我是否误解了事件冒泡的工作原理，或者在这种情况下如何阻止它？

最佳答案

我找到了解决方法，但实际的解决方案会更好。

因为问题是我没有满足这两个要求的容器:

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

为了确保它始终填满屏幕，每次加载页面时，我将其最小高度设置为视口(viewport)的计算高度减去包装器的顶部偏移量:

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

关于javascript - 试图防止 jQueryMobile 滑动手势冒泡，但它不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17974807/