时间戳

首页 > 解决方案 > 同时监听鼠标和键盘事件

angular - 同时监听鼠标和键盘事件

问题描述

我正在尝试收听这样的滚动和 keydown 事件：

@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")
  }

我该怎么做呢？

标签： angulareventsevent-handlingdom-eventslistener

解决方案

您可以使用rxjs merge运算符来完成这项工作

有关合并运算符的更多信息

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();
      }
    })
  }
}

推荐阅读