网站搜索

javascript - Angular 5 keyup 事件触发两次


所以我有一个非常简单的应用程序,字面意义上就是一个简单的“你好,世界”,在此基础上我添加了用于设计的Bootstrap和用于组件的ng-bootstrap。

在一个 ts 文件中,我有如下代码:

showMeTheKey(event: KeyboardEvent) {
    console.log(event);
}

在一个 HTML 页面上,我有如下代码:

<input (keyup)="showMeTheKey($event)">

这导致每当我按下一个键时,控制台上会出现两个事件,这些事件是相同的,除了时间戳当然不同(这里只是微秒级的差异)

有什么想法为什么会发生这种情况吗?还是这是正常的?

谢谢!

编辑:为了回答评论,这里是我的应用代码

这是我的 app.module:

import { HttpClientModule } from '@angular/common/http';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { InputModule } from './input/input.module';
import { NavbarComponent } from './navbar/navbar.component';

@NgModule({
  declarations: [
    AppComponent,
    NavbarComponent,
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    InputModule,
    NgbModule.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

这是我的应用组件:

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

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

    showMeTheKey(event: KeyboardEvent) {
        console.log(event);
        event.stopImmediatePropagation();
    }
}

这是我的应用 HTML:

<input (keyup)="showMeTheKey($event)">

编辑 2:这是一个带有编辑器的在线演示,所以你可以访问代码(当然,在在线演示中按 F12 可以查看日志):

实时演示: https://angular-znlk4p.stackblitz.io

编辑器: https://stackblitz.com/edit/angular-znlk4p

编辑 3:这是演示图片中事件触发两次的截图

答案#1

大家好,我找到了我的错误!

我正在通过虚拟机开发!而且我使用的软件不知为何会发送两次按键……即使我只输入一个字母,这也非常奇怪……

我需要向制造商报告那个错误!

我在一台非虚拟机的电脑上测试了自己的演示,它确实能正常工作!

谢谢大家帮我找到这个!

干杯!