如何检测用户是否滑动浏览器后退导航答案

【问题标题】：How to detect if user swipes for browser back navigation如何检测用户是否滑动浏览器后退导航
【发布时间】：2020-06-22 22:49:00
【问题描述】：

我有一个带有一些路由器动画的 Angular 应用程序。从 A 导航到 B 时，这看起来符合预期。当通过点击应用内的后退按钮或浏览器的后退按钮从 B 导航回 A 时，反向动画看起来也不错。

当移动用户使用滑动手势从 B 导航回 A 时，就会出现此问题。滑动本身会创建一种动画（滑动手指时会显示上一页），但是在此导航结束后，我的应用内动画仍然会触发，这看起来很刺耳。

有没有办法检测用户是否通过滑动来执行后退导航，以便我可以禁用我的 Angular 动画？

【问题讨论】：

标签： javascript node.js angular typescript

【解决方案1】：

您可以通过订阅路由器事件来检测这样的后退导航，并检查 navigationTrigger 是否等于“postate”，这是一个后退导航

router.events.pipe(
  filter(( event: NavigationEvent ) => {
             return( event instanceof NavigationStart );
})).subscribe(( event: NavigationStart ) => {
     if(event.navigationTrigger === "popstate") {
        //means it's a back navigation
     }       
});

这里是 Angular 文档中的 NavigationStart 类以了解更多详细信息

class NavigationStart extends RouterEvent {
 constructor(id: number, url: string, navigationTrigger: "imperative" | 
 "popstate" | "hashchange" = 'imperative', restoredState: { [k: string]: any; 
 navigationId: number; } = null)
 navigationTrigger?: 'imperative' | 'popstate' | 'hashchange'
 restoredState?: {...}
 toString(): string

 // inherited from router/RouterEvent
 constructor(id: number, url: string)
 id: number
 url: string
}

【讨论】：

这并不能完全解决我的问题。我的应用内后退按钮还使用 popstate 触发器来避免填充浏览器历史记录，并且在浏览器或硬件按钮中使用常规后退按钮也使用 popstate，但在这些情况下，我仍然想运行我的动画

【解决方案2】：

您可以将此 CDN 添加到您的应用中，它的尺寸很小，因此您可以检测到左右滑动

https://cdn.jsdelivr.net/npm/swiped-events@1.1.0/src/swiped-events.min.js

左滑

document.addEventListener('swiped-left', function(e) {
 ...
});

向右滑动

document.addEventListener('swiped-right', function(e) {
 ...
});

你也可以使用 hammerjs

【讨论】：