使用anchor元素click()方法后如何阻止页面刷新？

你的代码里，动态创建的<a>元素的click()方法不会导致页面刷新——因为这个元素根本没插入到DOM中，它的点击行为只会触发下载逻辑，不会触发页面跳转。页面刷新的真正原因大概率是绑定事件的按钮本身是表单内的提交按钮：

• 如果按钮位于<form>标签内，浏览器默认会把<button>的type设为submit，点击时会触发表单提交，进而导致页面刷新。这种情况下，哪怕你在事件里加了event.preventDefault()，也可能因为事件冒泡或其他因素没生效。

修复方案 #

1. 给按钮明确设置type="button" #

直接在按钮的HTML代码里加上type="button"，彻底避免它触发表单提交：

<button type="button">下载JSON</button>

2. 优化事件绑定逻辑（可选） #

如果按钮不在表单里，可通过加强事件阻止逻辑、优化临时链接的创建方式，确保下载流程稳定：

button.addEventListener("click", function (event) {
    // 彻底阻止默认行为和事件冒泡
    event.preventDefault();
    event.stopPropagation();

    const json = {a:"abc", d:"def"};
    // 格式化JSON，让下载的文件更易读
    const jsonStr = JSON.stringify(json, null, 2);
    const blob = new Blob([jsonStr], { type: 'application/json' });
    const url = URL.createObjectURL(blob);
    
    const downloadLink = document.createElement('a');
    downloadLink.href = url;
    downloadLink.download = "test.json";
    // 临时插入DOM再移除，兼容部分旧版浏览器
    document.body.appendChild(downloadLink);
    downloadLink.click();
    document.body.removeChild(downloadLink);
    
    URL.revokeObjectURL(url);
});

补充说明 #

• 动态创建的<a>元素无需阻止click默认行为，download属性已经指定了文件名，点击只会触发下载，不会跳转页面。
• 临时插入并移除链接的操作，是为了兼容部分移动端或旧版桌面浏览器，确保下载逻辑能正常触发。

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