dispatchEventがKeyboardEvents（Angular 4）で動作しない

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ステートメントは、タブキーが押されたかどうかをチェックしますが、イベントが送出された後は呼び出されません。私は、次の

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

マイdoClickHandlerAction（）関数としてのMouseEventとKeyboardEventのを交換する場合

興味深いことに、問題がKeyboardEventのであることを示す、と呼ばれます。

Answer 1

それだけで、このようなinputやtextareaとしてフォーカス可能要素に(keydown)イベントの仕事は非常にフォーカス動作を追加するliにtabindex="0"属性を追加しているようです：あなたがイベントを送出する際

<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