Question

我想这样做，因此在图像上滑动会将用户带到上一张或下一张图像，具体取决于滑动的方向。该部分效果很好，但它删除了放大图像的功能。根据{{3}}，解决方案是启用touchAction: 'auto'，但这会完全打破hammer.js，阻止它完全滑动。

代码：

<script src="../js/hammer.min.js"></script>
<script>
$('.imagecontainer').each(function(){
  var options = {
    touchAction: 'auto',
  };
  var mc = new Hammer(this, options);

  mc.on("swipeleft", function() {
    navTo('jsnavnext');
    return false;
  });
  mc.on("swiperight", function() {
    navTo('jsnavprev');
    return false;
  });
});
</script>

我可以使用touchAction: 'pan-y'以最不方便用户的方式使用缩放缩放工作（基本上需要用户进行古怪的圆圈运动），但这不是......很棒。理想情况下，我希望hammer.js只添加滑动导航，而不是触及任何其他默认行为。

Answer 1

我有一个类似的问题。我希望能够检测div上的滑动并且能够在div上进行缩放。滑动监听器似乎单独禁用缩放。添加touchAction:'auto'允许我捏缩放，但它读取会触发我的滑动动作并滚动（我不想让它滚动，只是想要触发滑动动作）。我在此解决方案的关键部分是使用recognizeWith，然后在preventDefault和panstart上调用panmove。这让我只需要所需的捏缩放和滑动

这是我的解决方案：

  var target = document.getElementById("target-div")
  var mc = new Hammer(target, {touchAction: 'auto' });

  mc.add( new Hammer.Pan({
    direction: Hammer.DIRECTION_ALL,
    threshold: 0 }) );

  mc.add(new Hammer.Swipe({
    direction: Hammer.DIRECTION_ALL,
    threshold: 1,
    velocity:0.1
  })).recognizeWith(mc.get('pan'));

  mc.on('panstart panmove', function(ev) { ev.preventDefault(); });

  mc.get('pinch').set({ enable: true });

  mc.on("pinch", function(ev) {
  //do anything you need to here, or not 
  });

  mc.on("swipeleft", function(ev) {
  //do something
  }

  mc.on("swiperight", function(ev) {
  //do something
  }

我仍然是hammer.js的新手，但我注意到github上有很多问题，人们试图在同一个元素上组合多个手势。我希望这有帮助！

hammer.js - 需要默认缩放行为+滑动

1 个答案: