Hammer.js滑动不会'单击按钮后才能工作

Hammer.js swipe doesn't work until button is clicked

本文关键字：按钮 单击 工作 js Hammer      更新时间：2023-09-26

我正在使用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菜单），然后一切都很好（向左滑动，向右滑动点击按钮）。

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

我是不是错过了hammer.js？可能是什么问题。

似乎试图在"身体"上滑动会导致Hammer抛出以下错误：

hammer.js:222未捕获类型错误：无法读取null的属性"addEventListener"

我想你需要在一个现有的非主体元素上添加滑动监听器。

以下代码适用于我：

<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"一样。

我希望这能有所帮助！

相关文章：