Question

我正在尝试侦听向下箭头键并在其位置触发标签事件。

我的模板包含此

<li #elRef 
    *ngFor="let handler of clickHandlers"
    (click)="doClickHandlerAction(handler)"
    (keydown)="checkArrowKey($event, elRef)">

我的组件包含以下内容

checkArrowKey(event: KeyboardEvent, el) {
    if (event.keyCode === 40) {
      event.preventDefault();

      let keyboardEvent = new KeyboardEvent('keydown', {
        "code": "9",
      });

      el.dispatchEvent(keyboardEvent);
    }
    if (event.keyCode === 9) {
      console.log("tab key pressed");
    }
  }

按下向下箭头键时，它会调度该事件，但该元素似乎没有收到该事件。底部的if语句检查Tab键是否被按下但是在调度事件后不会调用它。

有趣的是，如果我用一个MouseEvent替换keyboardEvent，如下面的

let clickEvent = new MouseEvent('click', {bubbles: true});

我的doClickHandlerAction（）函数将被调用，表明问题出在KeyboardEvent上。

Answer 1

似乎(keydown)事件仅对input和textarea这样的可聚焦元素起作用，因此在tabindex="0"上添加li属性以添加焦点行为：

<li #elRef 
    *ngFor="let handler of [1,2,3]" 
    (keydown)="checkArrowKey($event, elRef)" tabindex="0"> hh </li>

当您发送活动时，keyCode值变为0，因此请使用event.code阅读关键代码：

checkArrowKey(event: KeyboardEvent, el) {

    if (event.keyCode === 40) {
      event.preventDefault();

      let keyboardEvent = new KeyboardEvent('keydown', {
        "code": "9",
      });

      el.dispatchEvent(keyboardEvent);
    }
    if (event.keyCode === 9 || event.code === '9') {
      console.log("tab key pressed");
    }
  }

Demo

dispatchEvent无法使用KeyboardEvents（Angular 4）

1 个答案: