为什么尽管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();
    }

    //...
})