如何阻止Hammer.js不传播滑动事件？

Question

我有一个可用的标记和脚本，可以使用Hammer.js跟踪容器上的水平滑动：

 const container = document.getElementsByClassName('swiper')[0]; const manager = new Hammer.Manager(container); const swipe = new Hammer.Swipe(); manager.add(swipe); manager.on('swipe', event => { if (event.offsetDirection === 4) { container.style.background = 'red'; } if (event.offsetDirection === 2) { container.style.background = 'blue'; } }); 

 .swiper { height: 100vh; background: grey; } 

 <script src="https://hammerjs.github.io/dist/hammer.min.js"></script> <h1>Some content</h1> <div class="swiper"></div> <h1>More content</h1> 

小提琴

https://jsfiddle.net/vzg7fy9q/1/

---

这个工作正常，我已经用它触发了一个滑块。

但是，问题是，似乎所有的滑动事件都可以防止。 用户无法再在移动设备上向上或向下滚动。 我已经在装有iOS 11的iPhone上进行了测试。

---

有没有办法告诉Hammer.js传播这些事件而不是消耗它们？

Answer 1

我已通过显式设置应该使用DIRECTION_HORIZONTAL进行跟踪的方向来修复该问题。 我还删除了Hammer.Manager ：

const hammer = new Hammer(container, {});

hammer.get('swipe').set({ direction: Hammer.DIRECTION_HORIZONTAL });
hammer.on('swipe', event => {
    if (event.offsetDirection === 4) {
        container.style.background = 'red';
    }

    if (event.offsetDirection === 2) {
        container.style.background = 'blue';
    }
});