在单击按钮之前，Hammer.js 滑动不起作用答案

【问题标题】：Hammer.js swipe doesn't work until button is clicked在单击按钮之前，Hammer.js 滑动不起作用
【发布时间】：2016-05-06 09:04:47
【问题描述】：

我正在使用hammer.js 库为触摸设备添加滑动手势。

我的代码是：

var bodyElement = document.getElementById('body');
    var swipe = new Hammer(bodyElement);
    swipe.on("swipeleft", function() {
        $(".close-button").click();
    });
    swipe.on("swiperight", function() {
        $(".open-menu").click();
    });

我要做的是在向右滑动时单击一个按钮元素，在向左滑动时单击另一个按钮元素，但这在我先手动单击按钮（.open-menu）之后才起作用，之后一切正常（向左滑动，在按钮上向右滑动）。

我在 body 元素上有 ID 'body'，当用户在任何地方滑动时我想滑动工作。

hammer.js 是否遗漏了什么？可能是什么问题。

【问题讨论】：

标签： javascript jquery hammer.js

【解决方案1】：

似乎试图在“body”上滑动会导致 Hammer 抛出以下错误：

hammer.js:222 Uncaught TypeError: Cannot read property 'addEventListener' of null

我猜你需要在不是 body 的现有元素上添加滑动监听器。

以下代码适用于我：

<html lang="en">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
  <title>Test</title>

  <script type="text/javascript" language="Javascript" src="jquery-1.11.3.min.js"></script>
  <script type="text/javascript" language="Javascript" src="hammer.js"></script>
</head>

<body>
    <div id="wrap" style="position:fixed;top:0px;bottom:0px;left:0px;right:0px;">
        <a href="javascript:void(0);" onclick="javascript:alert ('Open Button');" class="open-menu">Open</a> - <a href="javascript:void(0);" onclick="javascript:alert ('Close Button');" class="close-button">Close</a>
    </div>

    <script type="text/javascript" language="Javascript">
    var bodyElement = document.getElementById ('wrap');
    var swipe = new Hammer (bodyElement);
    swipe.on ('swipeleft', function ()
    {
        $(".close-button").click ();
    });
    swipe.on ("swiperight", function()
    {
        $(".open-menu").click();
    });
    </script>
</body>

</html>

基本上，我已经将链接包装到一个名为“wrap”的 div 中，并且滑动与该 div 相关联。使用我应用于 div 的样式，它会延伸到整个页面，因此它基本上就像“body”一样。

希望对你有帮助！

【讨论】：