jQuery mobile swipe работает с перерывами

Я использую jQuery mobile 1.3.2, и я добавил крючки для события салфетки. Для каждого события салфетки я передвигаю коннектор note_container влево/вправо. Однако регистрация события салфетки прерывистая/не реагирующая на Samsung Galaxy S3 (и другие устройства для Android), но хорошо работает на iPhone. Любая конкретная причина?jQuery mobile swipe работает с перерывами

<html> 
<head> 
    <meta charset="utf-8" /> 
    <title>Notoji</title> 
    <meta name="viewport" content="width=device-width, user-scalable=no"/> 
    <link rel="stylesheet" type="text/css" href="css/main.css"/> 
    <link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.css"/> 
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> 
    <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.js"></script> 
    <script> 
     $(document).ready(function(){ 

      width = $('.note').first().width(); 

      $('.note_container').bind('swipeleft', swipe_note_left); 
      $('.note_container').bind('swiperight', swipe_note_right); 

      function swipe_note_left(){ 
       alert("left swiped"); 
       left_val = $('.note_container').offset().left; 
       adjusted_left = left_val - width; 
       $('.note_container').animate({left: adjusted_left, useTranslate3d:true}, 250); 
      } 

      function swipe_note_right(){ 
       alert('right swiped'); 
       left_val = $('.note_container').offset().left; 
       adjusted_left = left_val + width; 
       $('.note_container').animate({left: adjusted_left, useTranslate3d:true}, 250); 
      } 
     }) 
    </script> 
</head> 
<body> 
    <div data-role="page"> 
     <div data-role="header"> 
      <div class="title"> Notoji</div> 
     </div> 
     <div data-role="content" class="content review"> 
      <div class="note_container"> 
       <div class="note"> 
        <div class="note_text">Its my birthday, and I have treated myself to a very nice gift.</div> 
        <img class="sticker" src="/assets/sally/sally_04.png"/> 
       </div> 
       <div class="note"> 
        <div class="note_text">The rogue defender. Killer the wrestler bunny.</div> 
        <img class="sticker" src="/assets/killer/killer_01.png"/> 
       </div> 
      </div> 
      <a href="create.html" data-transition="slideup" data-inline="true"> 
       <span class="create"></span> 
      </a> 
      </span> 
     </div> 
    </div> 
</body>

Вы можете проверить код здесь: http://jsbin.com/UPoparU/1/

источник

2013-09-06 Salman Paracha

Это прекрасно работает на Samsung Galaxy S3 и Nexus 7. – Gajotres

У меня есть та же проблема, и обнаружили, что TouchMove (или по крайней мере что-то связано с TouchMove) вызывает проблему. Даже малейшее движение вверх/вниз вызывает прокрутку страницы и по какой-то причине отменяет салфетки.

Чтобы быстро проверить, если TouchMove является причиной вы можете отключить TouchMove, делая это в конце тела:

<script> 
    $(document.body).on('touchmove', function(event) { 
     event.preventDefault(); 
     event.stopPropagation(); 
    }); 
</script>

Это делает пойло работает очень хорошо для меня, но, конечно, она отключает прокрутки (и Мне нужна прокрутка, так что это не решение для меня), но, может быть, вы можете обойтись без прокрутки? Или, может быть, выяснить конкретную ошибку или какой-то другой способ обойти ее. В любом случае, я знаю, что это не подходящее решение, но я подумал, что это может быть полезно.

источник

2013-10-11 14:16:27 RHawkeyed

У меня тоже была эта проблема, используя JQuery mobile и Cordova на Galaxy S3. Я закончил с использованием этой библиотеки третьей стороны, и очистил его:

http://www.codingjack.com/playground/swipe/

источник

2014-09-07 22:49:27 Shaun

jQuery mobile swipe работает с перерывами

ответ

Смежные вопросы