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

【问题标题】：How to stop Hammer.js from not propagating swipe events?如何阻止 Hammer.js 不传播滑动事件？
【发布时间】：2018-06-19 15:08:36
【问题描述】：

我有一个有效的标记和脚本，可以使用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 传播这些事件而不是消耗它们？

【问题讨论】：

标签： javascript swipe gesture hammer.js event-propagation

【解决方案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';
    }
});

【讨论】：