HammerJS pan 对 Firefox 中的孙子元素失败

Question

我有一个带有 Hammerjs Pan 的 gallery pen（基于 pen by Drew Power）来水平滑动图像。在 Chrome 和 Safari 中运行良好，但在 Firefox 中无法运行

基本结构：

<div class="slider">
    <picture><img></picture>
    <picture><img></picture>
    <picture><img></picture>
</div>

• div.slider 是 Hammer.Manager 实例 el，带有“平移”侦听器。
• 每个 img 也会附带源标签

在 Firefox 中，img 上的左/右边距会暴露一些父图片元素，单击父元素以开始平移工作。但是单击它的子元素 img 不起作用。 pan 侦听器听到事件并启动 pan，但它立即结束。

使用 CSS touch-action:none 和 -webkit-user-drag:none 没有区别。

移除 img 标签并将其用作 div 的背景是不可取的，因为我们失去了使用图片+source+img 标签获得的响应式图像大小的好处。 p>

这是问题的一支笔 https://codepen.io/seanbischoff/details/aYYoMy/

非常感谢任何帮助！

Answer 1

添加draggable='false' 和ondragstart='return false' 属性。它会防止拖入FF。

<img src="..." draggable='false' ondragstart='return false'>

Modified CodePen