所以我有一个非常简单的应用程序,实际上是一个简单的 hello world,在此之上我为设计添加了 bootstrap,为组件添加了 ng-bootstrap。
在一个 ts 文件中,我有以下代码:
showMeTheKey(event: KeyboardEvent) {
console.log(event);
}
在一个 html 页面上,我有以下代码:
<input (keyup)="showMeTheKey($event)">
每当我按下一个键时,这会导致两个事件出现在控制台上,除了时间戳当然不同之外,这些事件是相同的(这里有一些微秒的差异)
知道为什么会这样吗?还是正常?
谢谢!
编辑:在这里回答评论是我的应用程序代码
这是我的应用程序模块:
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:这是演示中事件触发两次的打印屏幕 image
最佳答案
嘿,我发现了我的错误!
我正在通过虚拟机进行开发! 我正在使用的软件出于某种原因发送了两次 key ...... 即使我只输入一个字母,也很奇怪......
我需要向制造商报告该错误!
我在非 VM PC 上测试了我自己的演示,它确实可以正常工作!
谢谢大家帮我找到这个!
干杯!
关于javascript - Angular 5 keyup 事件被触发两次,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48803109/