如何解决为什么尽管event.preventDefault,页面仍不断重新加载?
无论何时我想通过按钮或Enter调用函数,即使设置了event.preventDefault ()
,页面也会重新加载。如何阻止我的页面重新加载?
我的HTML的一部分:
<form>
<input id="vornameInput">
<button id="vornameButton">Submit</button>
</form>
我的打字稿的一部分:
let vornameInputfield: HTMLInputElement;
let vornameButton: HTMLButtonElement;
let personenListe: PersonenListe;
let ulListe: HTMLUListElement;
document.addEventListener('DOMContentloaded',function () {
vornameInputfield = <HTMLInputElement>document.getElementById('vornameInput');
vornameButton = <HTMLButtonElement>document.getElementById('vornameButton');
ulListe = <HTMLUListElement>document.getElementById('personenListe');
personenListe = new PersonenListe();
vornameButton.addEventListener('click',function (event: MouseEvent) {
let vorname: string = vornameInputfield.value;
event.preventDefault();
if (vorname.trim().length !== 0) {
personenListe.addPerson(vorname);
vornameInputfield.value = "";
}
})
const ENTER_KEY = 13
vornameInputfield.addEventListener('keyup',function (event: KeyboardEvent) {
event.preventDefault();
if (event.keyCode === ENTER_KEY) {
let vorname: string = vornameInputfield.value;
if (vorname.trim().length !== 0) {
personenListe.addPerson(vorname);
vornameInputfield.value = "";
}
}
})
})
解决方法
这是因为您要阻止click
和keyup
的默认事件,但是要阻止的是表单上的默认submit
事件。
向表单添加ID就像输入和按钮一样:
<form id="vornameForm">
<input id="vornameInput">
<button id="vornameButton">Submit</button>
</form>
然后,将其与代码一起获取,并阻止表单上的默认提交事件:
let vornameForm: HTMLFormElement;
//...
document.addEventListener('DOMContentloaded',function () {
vornameForm = <HTMLFormElement>document.getElementById('vornameForm');
//...
vornameForm.addEventListener('submit',function(event: Event) {
event.preventDefault();
}
//...
})
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。