Question

我正在使用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的东西吗？可能是什么问题。

Answer 1

似乎试图轻扫身体＆＃39;导致Hammer抛出以下错误：

hammer.js：222 Uncaught TypeError：无法读取属性＆＃39; addEventListener＆＃39;为null

我猜你需要在一个不是正文的现有元素上添加滑动侦听器。

以下代码适用于我：

<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>

基本上我已将链接包装成一个名为“包裹”的div。和刷子绑在那个div上。随着我已经应用于div的样式，它延伸到整个页面，所以它基本上就像＆＃39; body＆＃39;无论如何。

我希望有所帮助！

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

1 个答案: