为什么event.preventDefault()失效，本地运行页面仍刷新而JS Fiddle正常？

核心触发原因90%以上为JS代码执行时机早于DOM元素渲染完成，JSFiddle平台默认会将用户编写的JS代码自动包裹在DOM加载完成的回调中执行，因此不会触发该问题，本地直接部署代码时容易踩坑。全部可能的原因如下：

• JS执行时机错误：如果将JS代码放在<head>标签内，或者放在<form>元素的上方，执行document.getElementById("searchForm")时表单还未被浏览器渲染到页面，返回结果为null，后续的提交事件监听根本没有绑定成功，表单会走默认提交逻辑刷新页面，alert自然不会触发。
• 页面存在重复ID：如果页面中出现多个id="searchForm"的元素，getElementById只会返回第一个匹配的元素，若第一个不是目标表单，同样会导致监听绑定失败。
• 前置脚本报错阻塞执行：如果这段JS代码之前的其他脚本运行抛出错误，会中断后续代码执行，事件绑定逻辑根本没有运行。
• 表单为动态生成元素：如果使用前端框架或手动动态创建该表单，绑定事件时表单还未被插入DOM树，同样会出现元素获取失败的问题。

对应解决方案 #

1. 调整JS执行时机：将JS代码放到</body>标签的末尾，或者用DOM加载完成事件包裹代码，示例如下：

document.addEventListener('DOMContentLoaded', function() {
  const searchForm = document.getElementById("searchForm");
  searchForm.addEventListener('submit', function(event) {
    var topic = document.getElementById("topicSearch").value;
    alert(topic);
    event.preventDefault();
  });
})

2. 排查页面错误：打开浏览器开发者工具的Console面板，查看是否有Cannot read properties of null (reading 'addEventListener')类报错，可快速定位是否为元素获取失败问题。
3. 检查页面ID唯一性：确认整个页面只有一个id="searchForm"的表单元素，无重复ID冲突。
4. 动态元素适配：如果表单是动态生成的，等待表单渲染完成后再执行事件绑定逻辑即可。

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