javascript - prevent - Intentando evitar que el gesto de deslizamiento de jQueryMobile burbujee, pero no funciona

stop immediate propagation

Question

Estoy usando jQuery Mobile y he creado algo que se asemeja a Android Holo Tabs:

http://note.io/18RNMRk

Para hacer que el gesto de deslizar funcione para cambiar entre pestañas, este es el código que agregué:

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

Con el HTML de las pestañas que se asemeja a:

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

Estoy escuchando el gesto de deslizar en el nivel de página porque el div[data-role=content] veces no puede llenar la pantalla verticalmente, si no hay suficiente contenido para hacerlo. Si escuché en este div y no estaba cubriendo la pantalla, y usted pasó cerca de la parte inferior, el evento no se desencadenaría en este div, estaría en la página raíz ( div[data-role=page] ).

Aquí está la representación 3D de Firefox de esa página como prueba de la afirmación anterior. He anotado div[data-role=content] :

http://note.io/18RPhyK

Por esa razón, lo escucho a nivel de página; pero dado que el número de pestañas puede desplazarse fuera de la ventana gráfica (como se ve arriba: el domingo está fuera de la pantalla a la derecha), me gustaría que el usuario también pueda desplazarse horizontalmente. Ya tengo funcionando el desplazamiento horizontal (eso es solo un CSS simple), pero el problema es que, incluso con mi e.stopPropagation() visto anteriormente, el gesto deslizar está burbujeando hasta el elemento de la página y mi gesto de barrido está impidiendo el desplazamiento suave que estaba disponible antes de agregar el gesto deslizar.

¿Entiendo mal cómo funciona el burbujeo de eventos o cómo detenerlo en este escenario?

Answer 1

Encontré una solución, pero una solución real sería mejor.

Dado que el problema es que no tengo un contenedor que llene estos dos requisitos:

1. contiene el contenido de la página, pero no las pestañas
2. use min-height para llenar siempre la pantalla verticalmente

Decidí agregar un contenedor:

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

Moví mi archivo adjunto de gesto de deslizamiento a este nuevo contenedor y eliminé el detector de deslizamiento de la barra de pestañas:

$(".contentWrapper").on(''swipeleft'', function(){
ui.activities.swipe(1);
}).on(''swiperight'', function(){
ui.activities.swipe(-1);
});

Y para asegurarme de que siempre llene la pantalla, cada vez que se carga la página, configuro su altura mínima a la altura calculada de la ventana gráfica menos el desplazamiento superior del contenedor:

$("#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''});
});

Esto hace exactamente lo que quiero. Puedo deslizar el contenido de la página para cambiar las pestañas, y puedo desplazar horizontalmente las pestañas sin activar un gesto de deslizamiento.

Para cualquier persona interesada en lograr el mismo efecto, aquí está mi 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;
}
}
}