Попытка предотвратить жест пузыря jQueryMobile от пузырей, но это не работает
Я использую jQuery Mobile и создал нечто похожее на Android Holo Tabs:
Чтобы заставить жест смахивания работать для переключения между вкладками, вот код, который я добавил:
$("#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]
).
Вот 3D-рендеринг этой страницы в Firefox для доказательства вышеприведенного утверждения. Я аннотировалdiv[data-role=content]
:
По этой причине я слушаю это на уровне страницы; но так как количество вкладок может прокручиваться из области просмотра (как показано выше: воскресенье находится за кадром справа), я бы хотел, чтобы пользователь мог прокручивать и эту горизонтальную прокрутку. У меня уже работает горизонтальная прокрутка (это всего лишь простой CSS), но проблема в том, что даже с моимe.stopPropagation()
как видно выше, жест смахивания пузырится до элемента страницы, и мой жест смахивания препятствует плавной прокрутке, которая была доступна до того, как я добавил жест смахивания.
Я неправильно понимаю, как происходит всплытие событий или как остановить его в этом сценарии?