Tentando impedir que o gesto de furto do jQueryMobile borbulhe, mas não está funcionando
Estou usando o jQuery Mobile e criei algo que lembra um pouco o Android Holo Tabs:
Para que o gesto de furto funcione para alternar entre as guias, este é o código que adicionei:
$("#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);
});
Com o HTML das guias:
<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>
Estou ouvindo o gesto de furto no nível da página porque odiv[data-role=content]
às vezes não pode preencher a tela verticalmente, se não houver conteúdo suficiente para isso. Se eu escutasse esse div e ele não estivesse cobrindo a tela, e você passasse perto do final, o evento não dispararia nesse div, seria na página raiz (div[data-role=page]
).
Aqui está a renderização 3D do Firefox dessa página para prova da afirmação acima. Anoteidiv[data-role=content]
:
Por esse motivo, estou escutando no nível da página; mas como o número de guias pode rolar para fora da viewport (como visto acima: Sunday está fora da tela à direita), eu gostaria que o usuário pudesse rolar na horizontal também. Eu já tenho o trabalho de rolagem horizontal (isso é apenas um CSS simples), mas o problema é que, mesmo com o meue.stopPropagation()
visto acima, o gesto de furto está borbulhando para o elemento de página e meu gesto de furto está impedindo a rolagem suave que estava disponível antes que eu adicionasse o gesto de furto.
Eu estou entendendo mal como funciona o borbulhamento de eventos ou como pará-lo nesse cenário?