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

Question

我要使其滑动，以便根据滑动的方向将用户带到上一个或下一个图像。 该部分效果很好，但它删除了放大图像的功能。 根据此答案 ，解决方案是启用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' （基本上要求用户进行怪异的圆周运动）以最小的用户友好方式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上存在很多问题，人们试图在同一元素上组合多个手势。 我希望这有帮助！