jQuery 移动图书馆 - 错误滑动检测

Question

所以我的代码中有一个问题。我只想检测左右滑动。我对图书馆提供的其他活动不感兴趣。

我正在使用 jQuery 移动图书馆，但它有问题。

预期行为是我的代码检测左右滑动。

收到行为。第一次滑动被成功检测到，然后没有（或者至少可能是可能不是..）。通常它会检测前 3 次滑动，然后停止检测。

我注意到，在每次滑动后，如果您单击 browser/document，则系统会检测到下一次滑动。

因此，如果您在滑动之间单击 html 文档，它就会起作用。如果你在没有 clicking/tapping 的情况下进行多次滑动，它似乎不起作用。

我在 Chrome 版本 43.x 和 Safari 移动浏览器（Iphone 和笔记本电脑）上进行了测试。我不确定如何解决这个问题。

我尝试过的事情：为了确保没有其他脚本或我的代码中的某些东西导致这个，我制作了一个 jsfiddle 只包含与此事件有关的事情。还是一样的问题。我也尝试了不同的 jQuery 版本。

我认为这可能是焦点问题，例如弹出警报后文档失去焦点或其他东西，您必须再次单击它。在每个 swipe/alert 之后尝试将焦点设置到 div 或 html 文档，但它似乎没有效果。

我还认为可能是警报引起的，所以我取消了警报并添加了另一种检测滑动的方法，比如添加一个用于检测滑动的计数器，并在每次 html 元素中填充计数检测到滑动。也没有成功。

JS FIDDLE : https://jsfiddle.net/o1Ltq7oL/3/

HTML :

 <div class="container">
        Swipe Me
    </div>

<div id="counter"></div>

Javascript :

var count = 0;

$(".container").on("swipeleft",function(){
        count++;
        $("#counter").html(count);
    });

    $(".container").on("swiperight",function(){
        count++;
        $("#counter").html(count);
    });

css:

.container {
    width:100px;
    height:100px;
    background:black;
    color:white;
}

外部资源：

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script type="text/javascript" src="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

非常感谢您对此事的意见，并在此先感谢您！

Answer 1

我找不到任何关于此类错误的信息，但看起来这个问题出现在 jQuery Mobile 1.4.4 中。或许您可以尝试 HammerJS 而不是 jQuery Mobile。

jQuery 移动图书馆 - 错误滑动检测

jQuery mobile library - buggy swipe detection

html

javascript

mobile

jquery