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

Posted 2023-05-09

【中文标题】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

【参考方案1】：

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

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

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