同时监听鼠标和键盘事件

如何解决同时监听鼠标和键盘事件

我正在尝试听这样的滚动和按键事件：

@HostListener('window:scroll',['$event']) onScrollEvent(event){
      console.log("scrolled",event)
  }


@HostListener('window:keydown',['$event']) handleKeydownEvent(event: KeyboardEvent){
      console.log("ctrl pressed",event)
  }

我想听 ctrl 并同时滚动，然后抓住它，这样我就可以阻止用户放大。但我不知道该怎么做，因为 hostlistener 只听单个事件

我也试过这个，但没有用，我仍然可以放大

@HostListener('window:keydown',['$event'])
  @HostListener('window:scroll',['$event'])
  onEvent(event){
    event.preventDefault()
    console.log("looks like you just tried to zoom in")
  }

我该怎么做？

解决方法

您可以为此作业使用 rxjs merge 运算符

More about merge operator

import { merge,Subject } from 'rxjs';

@Component({
  selector: 'my-app',templateUrl: './app.component.html',styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  // Define a Subject to hold scroll event
  onScorll$ = new Subject();
  // Define a Subject to hold keydown event
  onkeydown$ = new Subject();
  // Define var to hold both of events
  both$;

  @HostListener('window:scroll',['$event']) onScrollEvent(event){
      // console.log("scrolled",event)
      this.onScorll$.next(event);
  }

  @HostListener('window:keydown',['$event']) handleKeydownEvent(event: KeyboardEvent){
        // console.log("ctrl pressed",event)
      this.onkeydown$.next(event);

    }

  constructor() {
    // We set both$ to listen to our events simultaneously
    this.both$ = merge(this.onScorll$,this.onkeydown$)
    // We subscribe to it to make it actually work
    //
    this.both$.subscribe((event) => {
      // Each time event occur you will be notified here
      // So you can do something like this to prevent it
      if(this.zoomEnabled) {
         event.preventDefault();
      }
    })
  }
}