HammerJS在Firefox中孙子元素Pan事件失效问题求助

我之前做类似的图片滑动组件时，也碰到过Firefox里HammerJS Pan事件失效的情况，结合你的场景，给你几个实用的排查和解决方向：

1. 调整HammerJS的初始化配置 #

Firefox对触摸事件的处理逻辑和Chrome/Safari略有不同，默认可能没启用鼠标模拟触摸的支持，或者touchAction配置没明确。你可以在初始化Hammer.Manager时，加上这两个关键配置：

const slider = document.querySelector('.slider');
// 初始化Hammer实例时明确配置触摸行为和输入类型
const hammer = new Hammer.Manager(slider, {
  touchAction: 'pan-x', // 明确允许水平滑动，避免浏览器默认行为抢占事件
  inputClass: Hammer.TouchMouseInput // 强制启用鼠标输入模拟触摸，Firefox需要这个才能识别拖动操作
});

// 添加Pan事件并监听
hammer.add(new Hammer.Pan({ direction: Hammer.DIRECTION_HORIZONTAL }));
hammer.on('pan panstart panmove panend', (event) => {
  // 这里写你的滑动逻辑
});

2. 禁用图片默认的拖拽行为 #

Firefox中<img>标签默认有拖拽功能，这个行为会干扰HammerJS的Pan事件触发。你可以通过两种方式解决：

方式一：修改HTML属性 #

给所有图片加上draggable="false"：

<div class="slider">
  <picture><img draggable="false" src="你的图片地址"></picture>
  <picture><img draggable="false" src="你的图片地址"></picture>
  <!-- 其他图片同理 -->
</div>

方式二：通过JS阻止默认拖拽事件 #

给滑块容器添加dragstart事件监听，阻止默认行为：

slider.addEventListener('dragstart', (e) => {
  e.preventDefault();
});

3. 确保滑块容器有正确的CSS属性 #

有时候Firefox不会给没有明确尺寸或交互特性的元素触发触摸/鼠标事件，给.slider加上这些CSS：

.slider {
  width: 100%;
  height: auto; /* 或者设置固定高度，比如400px */
  overflow: hidden;
  user-select: none; /* 禁止文本选中，避免滑动时触发选中文本的干扰 */
  touch-action: pan-x; /* 和JS配置呼应，强化浏览器对水平滑动的行为支持 */
}

4. 检查HammerJS版本 #

如果你用的是较旧的HammerJS版本，可能存在Firefox兼容性bug，建议升级到最新的稳定版（比如2.0.8），新版本修复了不少跨浏览器的触摸事件问题。

你可以先从调整Hammer初始化配置和禁用图片拖拽开始试，这两个是Firefox中最常见的解决点，应该能解决你的Pan事件不触发的问题。

内容的提问来源于stack exchange，提问作者sb333