在單擊按鈕之前，Hammer.js滑動不起作用
[英]Hammer.js swipe doesn't work until button is clicked
問題描述
我正在使用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？ 可能是什么問題呢。
1 個解決方案
解決方案1
0 2016-05-17 19:31:41
似乎嘗試在“ body”上滑動會導致Hammer拋出以下錯誤：
Hammer.js：222未捕獲的TypeError：無法讀取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”一樣。
希望對您有所幫助！
Hammer.js不起作用
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.