Question

我需要禁用按F5按钮以禁用重新加载页面但它无法正常工作

import { Component } from '@angular/core';
import { HostListener } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {

  @HostListener('document:keyup', ['$event'])
  handleKeyboardEvent(event: KeyboardEvent): boolean { 
    event.preventDefault();
    console.log(event.key);
    return false
  }
}

Answer 1

如果你在测试时仔细观察，你会看到（至少在chrome中）F5 Keydown会触发重新加载。因此，当您检查Keyup时已经太晚了。

这是我在Google-Chrome控制台上测试的纯JavaScript版本：

 document.addEventListener('keydown', function (e) {
    //If the key that was pressed down is F5 (Key Code : 116), Ignore it
    console.log(e.keyCode);
    if ((e.which || e.keyCode) == 116) {
         e.preventDefault();
    }
})

希望这会有所帮助。

Answer 2

试试这样：

@HostListener('document:keydown', ['$event'])
handleKeyboardEvent(event: KeyboardEvent) {
    if(event.keyCode == 116) {
        event.preventDefault();
        return false;
    }
}

Angular2 preventDefault不起作用

2 个答案: