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

我正在使用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类似于：

 
 
 Thu 
 
 Fri 
 
 Sat AM 
 
 Sat PM 
 
 Sun 
  

我正在侦听页面级别的滑动手势，因为如果没有足够的内容， div[data-role=content]有时可能无法垂直填充屏幕。 如果我听了这个div并且它没有覆盖屏幕，并且你靠近底部滑动，事件将不会触发此div，它将在根页面上（ div[data-role=page] ）。

这是Firefox对该页面的3D渲染，用于certificate上述断言。 我注释了div[data-role=content] ：

http://note.io/18RPhyK

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

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

Answer 1

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

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

1. 包含页面内容，但不包含选项卡
2. 使用min-height始终垂直填充屏幕

我决定添加一个包装器：

 
 
 Thu 
 
 Fri 
 
 Sat AM 
 
 Sat PM 
 
 Sun 
 
 
   

我已将滑动手势附件移动到此新包装器，并从标签栏中移除了滑动侦听器：

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