IOS 13 not raising panend events when changing panning direction

问题

I have a custom image slider using Hammer.js events.

I use the following to create my 'hammer' object:

    const hammerPan = new Hammer(domElement, 
    {
        // lock vertical scrolling when panning left to right
        touchAction: 'pan-y',

        recognizers: [
            // we don't care about vertical, but we want always to get panstart and panend
            // events so we use ALL to prevent unncesessary filtering from hammerjs
            [Hammer.Pan, { direction: Hammer.DIRECTION_ALL, threshold: 10 }]
        ]
    });

The slider (like most sliders) moves left to right, but to avoid blocking vertical scroll on mobile devices I use touchAction: 'pan-y' so I can still scroll.

In IOS 12 everything worked just fine - even if I panned left and then moved my finger up before releasing. This would trigger some vertical pan events but would still end in panend.

With IOS 13 (and I have two phones to compare) it would not give me a final panend event so my slides would get 'stuck' halfway.

回答1:

Excuse RxJS syntax if this is unfamiliar to you, but all I needed to do was explicitly add the pancancel event.

const panUnfilteredRaw$ = fromEvent<HammerInput>(hammerPan as unknown as JQueryStyleEventEmitter, 
                          'panstart panmove panend pancancel').pipe(share());

I previously did not have this because either I copied it from somewhere, or I just never thought I needed it.

Not sure if IOS13 is being more or less picky (!) but it's certainly got different behavior if you change direction of panning - so arguably it is a bug.

I also switched from detecting panend to event.isFinal.

来源：https://stackoverflow.com/questions/58089104/ios-13-not-raising-panend-events-when-changing-panning-direction

标签

hammer.js

ios13