执行快速滑动会导致按钮对第一次点击没有反应

Question

我正在构建一个 angular 应用程序，使用 angular 导航栏进行响应式导航。为了让导航感觉非常流畅，我使用锤子来向右滑动以显示菜单，向左滑动以隐藏菜单。

但是，当快速向右滑动时（不是超快，而是智能手机上的正常速度），导航按钮不会对第一次点击做出反应，而只会对第二次点击做出反应。

如果滑动速度较慢，按钮会按预期工作。如果通过菜单切换按钮进行切换，它也会按预期工作。

示例 gif（先慢后快）：

如果您只是调整浏览器的大小，则不会发生此错误 windows。仅当您在 chrome 和 select 设备中使用 "toggle device toolbar" 时”以及在我的 android 9 设备上使用 chrome 用于 android.

app.component.html:

<mat-sidenav-container>
  <mat-sidenav #sidenav fxLayout="column" mode="side" opened="false" class="hidelarge sidenav">
    <mat-nav-list fxLayout="column">
      <a href="#" mat-button (click)="sidenav.toggle()" class="navtext" [ngClass]="{'linkactive': router.url=='/home', 'link': true}"
        [routerLink]="['/home']">Home</a>
      <a href="#" mat-button (click)="sidenav.toggle()" class="navtext" [ngClass]="{'linkactive': router.url=='/maturanten', 'link': true}"
        [routerLink]="['/maturanten']">Maturanten</a>
      <a href="#" mat-button (click)="sidenav.toggle()" class="navtext" [ngClass]="{'linkactive': router.url=='/fotos', 'link': true}"
        [routerLink]="['/fotos']">Fotos</a>
      <a href="#" mat-button (click)="sidenav.toggle()" class="navtext" [ngClass]="{'linkactive': router.url=='/musik', 'link': true}"
        [routerLink]="['/musik']">Musik</a>
      <a href="#" mat-button (click)="sidenav.toggle()" class="navtext" [ngClass]="{'linkactive': router.url=='/raumaufteilung', 'link': true}"
        [routerLink]="['/raumaufteilung']">Raumaufteilung</a>
      <a href="#" mat-button (click)="sidenav.toggle()" class="navtext" [ngClass]="{'linkactive': router.url=='/ballordnung', 'link': true}"
        [routerLink]="['/ballordnung']">Ballordnung</a>
      <a href="#" mat-button (click)="sidenav.toggle()" class="navtext" [ngClass]="{'linkactive': router.url=='/kontakt', 'link': true}"
        [routerLink]="['/kontakt']">Kontakt</a>
    </mat-nav-list>
  </mat-sidenav>
  <mat-sidenav-content fxFlexFill  (swiperight)="sidenav.open()" (swipeleft)="sidenav.close()" >
    <app-header (navToggle)="sidenav.toggle()">

    </app-header>
    <main class="minheight">
      <router-outlet></router-outlet>
    </main>
    <app-footer>

    </app-footer>

  </mat-sidenav-content>
</mat-sidenav-container>

在我的 app.module.ts 中：

...
export class MyHammerConfig extends HammerGestureConfig {
  overrides = <any>{
    // override hammerjs default configuration
    'swipe': { direction: Hammer.DIRECTION_HORIZONTAL },
    'pinch': { enable: false },
    'rotate': { enable: false },
    'pan': { enable: false },
    'tap': { enable: false },
    'press':{enable:false},
    'doubletap':{enable:false},
  };
}
...
providers: [
    { provide: HAMMER_GESTURE_CONFIG, useClass: MyHammerConfig }
  ],
...

我在我的 main.ts 文件中像这样导入锤子：

import 'hammerjs';

Answer 1

我遇到了类似的问题。该解决方案可能也适合您。如果你滑动，这个滑动也会执行一个点击事件，强制将视图聚焦在右侧。如果您在您的示例中单击 'Musik'，则单击会从右视图执行某种 'leave focus' 以聚焦 'Musik' 按钮。您可以尝试防止由于滑动运动而导致的点击。我知道它来自 AngularJs，但它的工作原理应该类似。

<div ng-swipe-left="swipeFunc(); swiping=true;" ng-click="swiping ? ( swiping = false ) : clickFunc();">
  ...
</div>

See the this answer on Whosebug
让我知道这对您的情况是否有帮助。

执行快速滑动会导致按钮对第一次点击没有反应

Performing a fast swipe causes button to not react to first click

hammer.js

typescript

angular-material

angular