试图阻止jQueryMobile滑动手势冒泡,但它无法正常工作

时间:2013-07-31 15:39:40

标签: javascript jquery jquery-mobile event-bubbling

我正在使用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

出于这个原因,我正在页面层面听它;但由于标签的数量可以滚出视口(如上所示:星期日在屏幕右侧),我希望用户能够水平滚动它。我已经有了水平滚动工作(这只是一些简单的CSS),但问题是,即使上面看到我的e.stopPropagation(),滑动手势也会冒泡到页面元素,我的滑动手势正在阻止在我添加滑动手势之前可用的平滑滚动。

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

1 个答案:

答案 0 :(得分:2)

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

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

  1. 包含页面内容,但不包含标签
  2. 使用min-height始终垂直填充屏幕
  3. 我决定添加一个包装器:

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