Angular中如何用@HostListener同时监听ctrl键与滚动事件阻止页面缩放

你之前的写法不生效有两个核心原因：

• 两个独立事件没有共享状态，无法判断是否是「ctrl按下的同时滚动」的组合操作
• 你监听的scroll事件不对，ctrl+滚轮触发的页面缩放属于wheel事件范畴，监听scroll无法拦截缩放行为

具体实现代码 #

首先在组件类中声明状态变量跟踪ctrl按键状态，再分别监听对应事件做判断即可：

// 跟踪ctrl键是否处于按下状态
private isCtrlPressed = false;

// 监听ctrl键按下
@HostListener('window:keydown', ['$event'])
handleKeyDown(event: KeyboardEvent) {
  if (event.key === 'Control') {
    this.isCtrlPressed = true;
  }
}

// 监听ctrl键松开
@HostListener('window:keyup', ['$event'])
handleKeyUp(event: KeyboardEvent) {
  if (event.key === 'Control') {
    this.isCtrlPressed = false;
  }
}

// 监听窗口失去焦点，避免用户按住ctrl切走窗口后状态错误
@HostListener('window:blur')
handleWindowBlur() {
  this.isCtrlPressed = false;
}

// 监听滚轮事件，判断组合操作拦截缩放
@HostListener('window:wheel', ['$event'])
handleWheel(event: WheelEvent) {
  if (this.isCtrlPressed) {
    event.preventDefault();
    console.log("已阻止ctrl+滚轮缩放页面");
  }
}

补充说明 #

• 该方案仅拦截桌面端通过ctrl+滚轮触发的页面缩放行为，如果需要完全禁止页面缩放，还可以在项目的入口html文件的meta标签里添加缩放限制：
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
• 部分浏览器有全局的页面缩放快捷键，比如ctrl +/-，如果需要也可以额外监听对应键盘事件拦截即可

内容的提问来源于stack exchange，提问作者skdadle