form按钮点击触发跳转后页面回退，事件监听器操作被还原如何解决？

你代码中的按钮位于<form>标签内部，未显式指定type属性的<button>元素，浏览器会默认将其识别为submit提交类型按钮。点击该按钮时会同时触发两个行为：首先执行你绑定的点击事件跳转到search.html，随后触发表单的默认提交逻辑——表单未指定action属性时默认向当前页面发起提交，导致页面被刷新回原页面，因此会出现search.html仅闪现一瞬就退回的现象。

你可以任选以下任意一种方法修复问题：

• 方法1：修改按钮类型为普通按钮
  直接在HTML代码中给按钮添加type="button"声明，避免触发表单提交：

<button type="button" id="submit">Search</button>

• 方法2：在JS事件处理中阻止默认行为
  给事件回调函数添加阻止默认事件的逻辑，无需修改HTML代码：

const searchbutton = document.getElementById("submit");
searchbutton.addEventListener("click", testmethod);

function testmethod(e) {
    // 阻止按钮默认的表单提交行为
    e.preventDefault();
    window.location.href="search.html";
}

• 方法3：禁用表单整体的默认提交行为
  给form标签添加提交拦截属性：

<form onsubmit="return false;"> 
    <input type="search" id="query" placeholder="Search...">
    <button id="submit">Search</button>
</form>

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