在某些情况下，滚动在列表视图上不起作用 - JQM

Question

我搜索了网络和这个网站，但没有找到适合我的问题的解决方案。

情况： - 我有一个 JQM 基本页面，上面有列表视图。 - 一些事件处理滑动等

问题： - 当我通过单击一个项目、按住它并向下或向上滑动来滚动列表时，它可以完美滚动，但是当我释放屏幕然后滚动再次在该列表项上，它什么也不做。

我制作了一个 jsfiddle 以在移动设备上重现它：http://jsfiddle.net/WQdJk/9/ *这是代码*：

<link rel="stylesheet" type="text/css" href="css/style.css"> 
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.css" />

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.js"></script>  
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true"></script>

<script>
   $(document).on('click', 'ul li a', function(){
       $('h3').css("color", "orange");
   });

   $(document).on( "swipeleft swiperight", function( e ) {
       if ( e.type === "swipeleft"  )     
           $("h3").css("color","blue");
       else 
           $("h3").css("color","green");
   });
</script>

<div data-role="page" id="index" data-theme="a">

    <div data-role="header" class="header" data-position="fixed" data-tap-toggle="false">    
        <h3>TEST</h3>
    </div>

    <div data-role="content" style="margin-top:50px; height:500px; overflow:scroll;">
        <ul data-role="listview">
            <li><a data-role="button" data-icon="home">Accueil</a></li>
            <li><a data-role="button" data-icon="check">Tâches</a></li>
            <li><a data-role="button" data-icon="calendar">Rendez-vous</a></li>
            <li><a data-role="button" data-icon="grid">Dossiers</a></li>
            <li><a data-role="button" data-icon="gear">Paramètres</a></li>
            <li><a data-role="button" data-icon="home">Accueil</a></li>
            <li><a data-role="button" data-icon="check">Tâches</a></li>
            <li><a data-role="button" data-icon="calendar">Rendez-vous</a></li>
            <li><a data-role="button" data-icon="grid">Dossiers</a></li>
            <li><a data-role="button" data-icon="gear">Paramètres</a></li>
            <li><a data-role="button" data-icon="home">Accueil</a></li>
            <li><a data-role="button" data-icon="check">Tâches</a></li>
            <li><a data-role="button" data-icon="calendar">Rendez-vous</a></li>
            <li><a data-role="button" data-icon="grid">Dossiers</a></li>
            <li><a data-role="button" data-icon="gear">Paramètres</a></li>
            <li><a data-role="button" data-icon="home">Accueil</a></li>
            <li><a data-role="button" data-icon="check">Tâches</a></li>
            <li><a data-role="button" data-icon="calendar">Rendez-vous</a></li>
            <li><a data-role="button" data-icon="grid">Dossiers</a></li>
            <li><a data-role="button" data-icon="gear">Paramètres</a></li>
        </ul>
    </div>
</div>

---

您能否就如何解决此问题给我一些建议或提示？滚动后按钮似乎处于待机状态...

提前致谢

---

PS : 实际上，这只发生在滚动项目的文本、释放滚动、从该项目再次滚动但不在文本上（在按钮本身上但在锚文本之外）时发生。

Answer 1

这是由 JQM 中的一个错误引起的，该错误已解决但尚未实现 https://github.com/jquery/jquery-mobile/issues/5534

基本上，滑动事件测量的最小距离必须考虑设备的像素密度。因此，在 JQM 的情况下，对 touch.js 的以下更改将解决该问题：

horizontalDistanceThreshold = window.devicePixelRatio >= 2 ? 15 : 30;
verticalDistanceThreshold = window.devicePixelRatio >= 2 ? 15 : 30;