jQuery 移动库 - 错误滑动检测

Question

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

我正在使用 jQuery 移动库，但是它有问题。

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

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

我注意到，在每次滑动之后，如果您点击浏览器/文档，那么下一次滑动就会被检测到。

因此，如果您在两次滑动之间单击 html 文档，它就会起作用。如果您因此多次滑动而不点击/点击它似乎不起作用。

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

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

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

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

JS 小提琴： 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。