我正在使用 jQuery Mobile 并创建了一些类似于 Android Holo Tabs 的东西:
http://note.io/18RNMRk 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 http://note.io/18RPhyK
出于这个原因,我在页面级别监听它;但由于选项卡的数量可以滚动出视口(如上所示:周日在屏幕右侧),我希望用户也能够水平滚动。我已经让水平滚动工作了(这只是一些简单的 CSS),但问题是,即使我的e.stopPropagation()
如上所示,滑动手势向上冒泡到页面元素,而我的滑动手势阻止了在添加滑动手势之前可用的平滑滚动。
我是否误解了事件冒泡的工作原理,或者在这种情况下如何阻止它?