hammer.js 拖动不开始'直到手指停止在 ipad 屏幕上答案

【问题标题】：hammer.js dragging not start 'till finger stop on ipad screenhammer.js 拖动不开始'直到手指停止在 ipad 屏幕上
【发布时间】：2021-02-08 13:13:21
【问题描述】：

使用hammer.js 拖动可在PC 上的浏览器上使用。它会持续触发，但对于 iPad，几乎没有问题。 在屏幕上拖动/滑动手指停止后触发

模板

<v-sheet v-pan="onPan">
    <div class="vista__img" ref="image" :style="{ backgroundImage: 'url(' + vista.image + ')' }"></div>
</v-sheet>

指令

 directives:{
    pan: {
      bind: function(el, binding) {
        if (typeof binding.value === "function") {
          const mc = new Hammer(el);
          mc.get("pan").set({ direction: Hammer.DIRECTION_ALL });
          mc.on("pan", binding.value);
        }
      }
    },

方法和计算

 methods:{
   onPan(e) {
      
      const dragOffset = -100 / this.itemWidth * e.deltaX / this.overflowRatio;
      const transform = this.currentOffset + dragOffset;
    
      this.$refs.image.style.setProperty("--x", transform);
    
      if (e.isFinal) {
        this.currentOffset = transform;
        const maxScroll = 100 - this.overflowRatio * 100;
        let finalOffset = this.currentOffset;     
      }
    },
  }

  computed: {
    overflowRatio() {
            return this.$refs.image.scrollWidth / this.$refs.image.offsetWidth;
        },
        itemWidth() {
            return this.$refs.image.scrollWidth;
    },
  },

关于在 iPad 上连续处理拖动有什么想法吗？

AND这个问题只出现在iPad浏览器（safari, chrome）上，iPhone没有问题

【问题讨论】：

"It fires finger drag is stop"是什么意思
例如，当我开始滑动/拖动图像时，它不会触发直到，拖动/滑动手指停止在屏幕上。我不知道如何更简单地解释它......@canbax
如果您是在真实的物理 iPad 设备上观察到这一点，那么复制是很困难的。如果可以在浏览器的开发者工具上重现，调试起来会更容易。此外，最小的可重复样本可能会有所帮助。
只有ipad？还是任何触控设备？
在 Iphone/safari 和 macbook/chrome/safari 上也没有问题.. 问题只出现在 IPAD @MoshFeu

标签： javascript hammer.js

【解决方案1】：

您的问题可能与一种称为事件传播的现象有关。 iOS 处理它的方式与其他系统稍有不同（是的，它是特定于系统的，而不是特定于浏览器的，Peter-Paul Koch 写了一篇关于它的 article）。

如果您想了解一些背景知识，javascript.info 有一篇关于 bubbling and capturing 的精彩、详尽的文章。

如果您只是想解决问题，这里有一个issue on GitHub 应该会有所帮助。另外，hammer.js documentation 也提到了它。

【讨论】：