Question

我想在component.ts文件中的同一个函数中处理click事件+ CTRL keypress事件，但我似乎无法在任何地方找到解决方案。我试过了：

@HostListener("click")
    onDropdownItemClick( evt: keyboardEvent) {
        console.log(evt.keyCode);
    }

但它只返回＆＃34; ERROR TypeError：无法读取属性＆＃39; keyCode＆＃39;未定义＆＃34;

我也尝试过这个：

@Component({
        selector: '....',
        templateUrl: '....',
        host: {
            '(window:keydown)': 'findKey($event)',
            '(window:mousedown)': 'findKey($event)'
        }
   });

findKey(event) {
         if(event.ctrlKey && event.which === 1){
               console.log("CTRL + mouse-click");
        }
    }

但它也没有用。有人建议如何同时捕捉这两个事件？

Answer 1

MouseEvent事件提供ctrlKey属性，允许在发生点击时读取 Ctrl 键状态

@HostListener("click", ['$event'])
onDropdownItemClick( evt: MouseEvent) {
  console.log('clicked - with ctrl pressed:', evt.ctrlKey);
}

https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/ctrlKey

<击> 只需将控制键的状态存储在字段中，然后在单击事件中读取它：

ctrlDown = false; @HostListener('window:keydown.ctrl') onCtrlDown() {this.ctrlDown = true; } @HostListener('window:keydown.ctrl') onCtrlUp() {this.ctrlDown = false; } @HostListener("click") onDropdownItemClick( evt: keyboardEvent) { console.log('clicked - with ctrl pressed:', this.ctrlDown); }

如果以上不起作用，请尝试

@HostListener('window:keydown', ['$event']) onCtrlDown(event) {this.ctrlDown = event.ctrlKey; } @HostListener('window:keydown') onCtrlUp() {this.ctrlDown = false; }

<击>

Angular 4 - 同时处理两个事件

1 个答案: