僅在觸摸時觸發Javascript事件

Question

我試圖僅在觸摸時觸發一些JS事件（用於在響應項目中顯示或不顯示側面菜單）。 我查看了Hammer.js，並遵循了基礎知識，這就是我的想法：

var $mainPage = $('#main-page');
  var drawer = 0;
  $mainPage.hammer()
                .on('swiperight', function(e){
                  if(drawer){
                    return true;
                  }
                  $mainPage.css({'transform': 'translateX(260px)', '-ms-transform': 'translateX(260px)', '-webkit-transform': 'translateX(260px)'});
                  drawer = 1;
                })
                .on('swipeleft', function(e){
                  if(!drawer){
                    return true;
                  }
                  $mainPage.css({'transform': 'translateX(0)', '-ms-transform': 'translateX(0)', '-webkit-transform': 'translateX(0)'});
                  drawer = 0;
                });

一切似乎都很好，除了它不僅在觸摸事件上觸發而且在鼠標事件上觸發。 如果我嘗試用鼠標復制swype，它也可以工作...而且我不喜歡它:)

因此，我想知道如何才能做到，僅在觸摸操作時才觸發事件。

Answer 1

Hammer.js將始終與鼠標事件一起使用。 理想情況下，我嘗試使用Modernizr或JavaScript檢測觸摸，然后初始化錘碼。

if (Modernizr.touch) { 
    //your hammer code
}

或使用普通的javascript。

var supportsTouch = 'ontouchstart' in document.documentElement;

if(supportsTouch){
  // your hammer code
}