使用event.preventDefault()后点击提交按钮页面仍刷新的问题

问题根源 #

你的代码存在两个核心问题，导致event.preventDefault()完全没生效：

1. 事件绑定未初始化
   页面加载完成后，你没有创建任何Transaction实例，按钮的click事件从未被绑定。第一次点击提交按钮时，浏览器直接执行表单默认提交行为，刷新页面，此时handleClick函数根本没机会执行，event.preventDefault()自然起不到作用。

2. 类的职责严重混乱
   Transaction类既用来表示交易记录（存储金额、发送方、接收方），又负责绑定DOM事件和处理表单提交。更严重的是，handleClick函数内部还会创建新的Transaction实例，这会导致每次点击按钮都重复给按钮绑定click事件，最终引发无限循环和逻辑混乱。

修复方案 #

重构代码，将交易数据模型和表单交互逻辑彻底分离：

1. 重构后的Transaction类（仅作为数据模型） #

// Transaction.js
class Transaction {
    constructor(amount, sender, receiver) {
        this.amount = amount;
        this.sender = sender;
        this.receiver = receiver;
    }

    print() {
        console.log(`${this.sender} sent ${this.amount} bits to ${this.receiver}`);
    }
}

// 表单交互逻辑单独处理
document.addEventListener('DOMContentLoaded', function() {
    const button = document.getElementById('clicker');
    const confirmationEl = document.querySelector('.confirmation');

    // 清空输入框的工具函数
    function emptyInputs() {
        document.querySelector('#bedrag').value = '';
        document.querySelector('#verzender').value = '';
        document.querySelector('#ontvanger').value = '';
    }

    // 表单提交处理函数
    function handleClick(event) {
        event.preventDefault();
        
        confirmationEl.style.color = 'green';
        const amount = document.querySelector('#bedrag').value;
        const sender = document.querySelector('#verzender').value;
        const receiver = document.querySelector('#ontvanger').value;

        // 创建交易记录实例并打印
        const transaction = new Transaction(amount, sender, receiver);
        transaction.print();
        
        // 清空输入框并提示成功
        emptyInputs();
        confirmationEl.innerText = "交易已完成！";
    }

    // 页面加载完成后绑定点击事件
    button.addEventListener('click', handleClick);
});

2. HTML代码保持不变 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha2/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container d-flex justify-content-center align-items-center flex-column">
        <h2>Maak een transactie</h2>
        <form class="form-group">
            <div>
                <label for="bedrag">Bedrag:</label>
                <input type="number" class="form-control" id="bedrag" name="bedrag">
            </div>
            <div>
                <label for="verzender">Verzender:</label>
                <input type="text" class="form-control" id="verzender" name="verzender">
            </div>
            <div>
                <label for="ontvanger">Ontvanger:</label>
                <input type="text" class="form-control" id="ontvanger" name="ontvanger">
            </div>
            <button type="submit" id="clicker" class="btn btn-primary mt-2 ">Submit</button>
        </form>
        <p class="confirmation"></p>
    </div>
    <script src="Transaction.js" type="module"></script>
</body>
</html>

关键改进点 #

• 职责分离：Transaction类只专注于交易数据的存储和打印，表单交互逻辑单独提取，避免逻辑耦合。
• 确保事件绑定：通过DOMContentLoaded事件保证页面加载完成后再绑定按钮点击事件，确保事件能被正确触发。
• 避免重复绑定：点击事件仅绑定一次，不会因创建交易实例重复绑定，防止逻辑混乱。

内容的提问来源于stack exchange，提问作者Arjen Bos