Молоток.JS swipe не работает до нажатия кнопки

Я использую молоток.библиотека 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();
    });

То, что я пытаюсь сделать, это нажать на один элемент кнопки, когда проведите вправо и нажмите на другой элемент кнопки, когда проведите влево, но это не работает, пока я не нажму на кнопку сначала (.открыть-меню) вручную, после этого все работает нормально (проведите влево, проведите вправо нажимает на кнопки).

У меня есть ID ‘body’ на элементе тела, я хочу, чтобы салфетки работают, когда пользователь проводит в любом месте.

Я что-то упускаю с молотком.js? В чем может быть проблема.

1 ответ

  1. Кажется, что попытка салфетки на «тело» вызывает молоток бросить следующую ошибку:

    молоток.js: 222 Uncought TypeError: не удается прочитать свойство ‘addEventListener’ null

    Я думаю, что вам нужно добавить прослушиватель swipe на существующий элемент, который не является телом.

    Следующий код работает для меня:

    <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 под названием «wrap», и свипинг привязан к этому div. С помощью стилей, которые я применил к div, он растягивается по всей странице, поэтому он в основном действует как «тело» в любом случае.

    Надеюсь, это поможет!