javascript - 仅在触摸时触发 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
}