尽管 event.preventDefault ()，为什么我的页面一直在重新加载？

Question

每当我想通过按钮或 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 = "";

            }
        }
    })

})

Answer 1

那是因为您要阻止 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();
    }

    //...
})

尽管 event.preventDefault ()，为什么我的页面一直在重新加载？

Why does my page keep reloading despite event.preventDefault ()?

forms

preventdefault

typescript