javascript - HammerJS pan 在 Firefox 中的孙元素失败

Question

我有一个 gallery pen (基于 pen by Drew Power )使用 Hammerjs Pan 水平滑动图像。在 Chrome 和 Safari 中运行良好，但在 Firefox 中运行不正常

基本结构:

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

• div.slider 是 Hammer.Manager 实例 el，带有一个“pan”监听器。
• 每个 img 也会有随附的源标签

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

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

删除 img 标签并将其用作 div 的背景是不可取的，因为我们失去了使用 picture+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