Question

我正在尝试将事件lsitener添加到表单内的按钮，但是由于任何原因它都无法按照我想要的方式工作。另一方面，当我将按钮移出表单时，它开始起作用。

document.getElementById('a').addEventListener('click', () => {
	document.getElementById('a').style.background = 'red';
})
document.getElementById('b').addEventListener('click', () => {
	document.getElementById('b').style.background = 'red';
})

<form>
<button id="a">test</button>
</form>

<button id="b">test</button>

当我单击表单内的按钮时，它变成红色约一秒钟，然后又恢复为默认样式。有人可以解释一下导致这种现象的原因并提出解决方案吗？

Answer 1

按钮的默认类型为submit。这就是您按钮的类型。当您单击表单内类型为submit的按钮时，表单将提交表单，并且您会看到样式重置。您可以在按钮标记中添加type="button"并选中

document.getElementById('a').addEventListener('click', () => {
	document.getElementById('a').style.background = 'red';
})
document.getElementById('b').addEventListener('click', () => {
	document.getElementById('b').style.background = 'red';
})

<form>
<button id="a" type="button">test</button>
</form>

<button id="b">test</button>

Answer 2

使用preventDefault()，或者如果使用type="button/submit"提交则分配按钮类型preventDefault()，如果按钮忽略它；如果未分配类型，则按钮的默认行为是提交。

document.getElementById('a').addEventListener('click', () => {

	document.getElementById('a').style.background = 'red';
})
document.getElementById('b').addEventListener('click', (e) => {
e.preventDefault();
	document.getElementById('b').style.background = 'red';
})

<form>
<button type="button" id="a">test</button>
</form>

<button id="b">test</button>

Answer 3

使用preventDefault（）函数可防止表单重新加载页面！

document.getElementById('a').addEventListener('click', (event) => {
event.preventDefault();
	document.getElementById('a').style.background = 'red';
})
document.getElementById('b').addEventListener('click', () => {
	document.getElementById('b').style.background = 'red';
})

<form>
<button id="a">test</button>
</form>

<button id="b">test</button>

表单内的Click事件监听器

3 个答案: