试图防止jQueryMobile滑动手势起泡，但是它不起作用 [英] Trying to prevent jQueryMobile swipe gesture from bubbling, but it's not working
问题描述
我正在使用jQuery Mobile，并创建了一些类似于Android Holo Tabs的东西:
I'm using jQuery Mobile and created something that somewhat resembles Android Holo Tabs:
为了使滑动手势在选项卡之间切换时起作用，这是我添加的代码:
In order to get the swipe gesture to work for switching between tabs, this is the code I've added:
$("#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类似于:
With the tabs' HTML resembling:
<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])上.
I'm listening for the swipe gesture at the page-level because the div[data-role=content] can sometimes not fill the screen vertically, if there isn't enough content to do so. If I listened on this div and it was not covering the screen, and you swiped close to the bottom, the event wouldn't fire on this div, it would be on the root page (div[data-role=page]).
这是Firefox对该页面的3D渲染，以证明上述主张.我已经注释了div[data-role=content]:
Here's Firefox's 3D rendering of that page for proof of the above assertion. I've annotated div[data-role=content]:
由于这个原因，我在页面级别上进行监听；但是由于选项卡的数量可以滚动到视口之外(如上所示:星期日不在屏幕右侧)，我希望用户也可以水平滚动.我已经可以进行水平滚动了(这只是一些简单的CSS)，但是问题是，即使上面显示了e.stopPropagation()，滑动手势也会冒泡到page元素，而滑动手势却阻止了平滑操作添加滑动手势之前可以进行的滚动.
For that reason, I'm listening for it at the page level; but since the number of tabs can scroll out of the viewport (as seen above: Sunday is off-screen to the right), I would like the user to be able to scroll that horizontally as well. I've already got the horizontal scrolling working (that's just some simple CSS), but the problem is that, even with my e.stopPropagation() seen above, the swipe gesture is bubbling up to the page element and my swipe gesture is preventing the smooth scrolling that was available before I added the swipe gesture.
我是否误解了事件冒泡的工作原理，或者在这种情况下如何阻止事件冒泡?
Am I misunderstanding how event bubbling works, or how to stop it in this scenario?
推荐答案
我找到了一种解决方法，但是实际的解决方案会更好.
I've found a workaround, but an actual solution would be better.
因为问题是我没有一个容器可以满足这两个要求:
Since the problem is that I don't have a container that fills these two requirements:
- 包含页面内容，但不包含标签
- 使用最小高度始终垂直填充屏幕
我决定添加一个包装器:
I decided to add a 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>
我已将滑动手势附件移至该新包装器，并从选项卡栏中删除了滑动侦听器:
I've moved my swipe gesture attachment to this new wrapper and removed the swipe listener from the tab bar:
$(".contentWrapper").on('swipeleft', function(){
ui.activities.swipe(1);
}).on('swiperight', function(){
ui.activities.swipe(-1);
});
为了确保它始终填充屏幕，每次加载页面时，我都将其最小高度设置为视口的计算高度减去包装器的顶部偏移量:
And in order to make sure it always fills the screen, every time the page is loaded, I set its min-height to the calculated height of the viewport minus the wrapper's top offset:
$("#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'});
});
这正是我想要的.我可以在页面内容上滑动以切换标签，也可以在不激活滑动手势的情况下水平滚动标签.
This does exactly what I want. I can swipe on the page content to switch tabs, and I can horizontally scroll the tabs without activating a swipe gesture.
对于有兴趣实现相同效果的任何人，这是我的LESSCSS:
For anyone interested in achieving the same effect, here's my 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;
}
}
}
这篇关于试图防止jQueryMobile滑动手势起泡，但是它不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
