EventListener函数中的操作在执行后被恢复 [英] Actions in eventlistener function is reverted after being executed
本文介绍了EventListener函数中的操作在执行后被恢复的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我对Java脚本相当陌生，目前正在尝试用它做一些事情。 我偶然发现了W3School的一个教程，教你如何在按下按钮后改变它的颜色。
我想做一些类似的事情，但在按下按钮时加载另一个页面，其中包含一些搜索查询结果。
我的html代码如下：
<html>
<head>
<meta charset = "utf-8">
<title>Test</title>
<script type="text/javascript" src="search.js" defer></script>
</head>
<body>
<header>
<h1>Test</h1>
</header>
<main>
<form>
<input type="search" id="query" placeholder="Search...">
<button id="submit">Search</button>
</form>
</main>
</body>
</html>
下面是相应的Java脚本代码：
const searchbutton = document.getElementById("submit");
searchbutton.addEventListener("click", testmethod);
function testmethod() {
window.location.href="search.html";
}
代码本身似乎可以正常工作，但每当按下按钮时，earch.html页面就会在瞬间加载，然后恢复到原来的状态。我甚至直接复制了W3School教程中的代码，但它仍然不起作用。 你知道是什么原因导致页面在按下按钮后变回原处吗？
提前谢谢！
推荐答案
更改位置或提交表单将(重新)加载(目标)页面-您正在同时执行这两项操作。
您可以通过传入事件并在测试方法中使用vent.prevenentDefault()开始，然后执行除更改位置之外的其他操作
我强烈建议不要将事件分配给提交按钮，而应使用提交事件
您还需要包装在页面加载事件侦听器中，或者将脚本移动到表单后面
也不要在表单中调用任何提交
数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">function testmethod(e) {
e.preventDefault(); // stop submission
console.log(this.query.value);
this.subbut.style.color = "red";
}
window.addEventListener("load", function() {
document.getElementById("myForm").addEventListener("submit", testmethod);
});<main>
<form id="myForm">
<input type="search" name="query" id="query" placeholder="Search...">
<button name="subbut">Search</button>
</form>
</main>如果您不需要提交表单，请使用type="；Button"；而不使用表单
数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">function testmethod(e) {
console.log(document.getElementById("query").value)
this.style.color = "red";
}
window.addEventListener("load", function() {
document.getElementById("subbut").addEventListener("click", testmethod);
});<main>
<input type="search" id="query" placeholder="Search...">
<button type="button" id="subbut">Search</button>
</main>这篇关于EventListener函数中的操作在执行后被恢复的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
