Hammer.js Swipe funktioniert nicht, bis auf die Schaltfläche geklickt wird

Ich benutze die hammer.js-Bibliothek, um Swipe-Gesten für Touch-Geräte hinzuzufügen.Hammer.js Swipe funktioniert nicht, bis auf die Schaltfläche geklickt wird

Mein Code ist:

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

Was ich versuche auf ein Button-Element, wenn wischen Sie nach rechts und klicken Sie auf eine andere Taste Element klicken, um zu tun ist, wenn Swipe links, aber das funktioniert nicht, bis ich auf auf der Taste zuerst (.Open-Menü) manuell, danach alles gut funktioniert (nach links wischen, swipe rechts klickt auf die Tasten).

Ich habe die ID 'Körper' auf Körperelement, ich möchte wischen arbeiten, wenn der Benutzer überall wischt.

Fehle ich etwas mit hammer.js? Was könnte das Problem sein?

Quelle

2016-05-06 mixerowsky

Es scheint, dass auf 'Körper' zu streichen versucht verursacht Hammer den folgenden Fehler werfen:

hammer.js: 222 Uncaught Typeerror: kann Eigenschaft 'addEventListener' von null

lesen Ich denke, Sie müssen den Swipe-Listener für ein vorhandenes Element hinzufügen, das kein Body ist.

Der folgende Code funktioniert für mich:

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

Im Grunde habe ich die Links in einem div ‚wrap‘ genannt gewickelt und das streich zu diesem div gebunden ist. Mit den Styles, die ich auf das div angewendet habe, erstreckt es sich über die gesamte Seite, so dass es sich im Grunde wie "Körper" verhält.

Ich hoffe, dass hilft!

Quelle

2016-05-17 19:31:41 Phil

Hammer.js Swipe funktioniert nicht, bis auf die Schaltfläche geklickt wird

Antwort

Verwandte Themen