如何在JS函数中同时使用事件对象与自定义参数并正确调用preventDefault

你的代码存在两处核心错误导致preventDefault不生效：

• 事件绑定逻辑错误：addEventListener的第二个参数要求传入触发事件时执行的函数引用，你写的update('e',id)会在绑定时就直接执行update函数，不会等到点击时触发，而且你传入的'e'是普通字符串，不是浏览器生成的真实事件对象
• preventDefault是方法属性，你没有加括号调用，只是读取了方法本身，没有实际执行逻辑

修复步骤 #

1. 修改事件绑定逻辑，用匿名函数包裹调用，接收浏览器传入的真实事件对象再传递给update函数
2. 给preventDefault添加括号执行调用
3. 额外补充重复绑定规避逻辑，避免多次调用edit函数时给按钮重复绑定点击事件

修复后完整代码 #

function edit(id) {
    let name = document.querySelector('#name');
    let price = document.querySelector('#price');

    name.value = products[id].name;
    price.value = products[id].price;
    
    const updateBtn = document.querySelector(".update");
    // 先移除之前绑定的事件，避免重复绑定
    updateBtn.removeEventListener('click', update.bind(this));
    // 绑定事件，传入真实事件对象和id
    updateBtn.addEventListener('click', (e) => update(e, id));
}

function update(e, id) {
    // 调用preventDefault方法
    e.preventDefault();
    
    let name = document.querySelector('#name');
    let price = document.querySelector('#price');
    
    products[id].name = name.value;
    products[id].price = price.value;
    
    showProduct();
}

内容的提问来源于stack exchange，提问作者Berkay O.