单击表单内的事件侦听器[重复]

Posted 2023-02-22

【中文标题】单击表单内的事件侦听器[重复]

【英文标题】：Click event listener inside a form [duplicate]

【发布时间】：2018-12-19 04:21:45

【问题描述】：

我正在尝试将事件侦听器添加到表单内的按钮，但无论出于何种原因，它都无法按我想要的方式工作。另一方面，当我将按钮移出它开始工作的表单时。

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>

当我单击表单内的按钮时，它会在几分之一秒内变为红色，然后返回默认样式。有人可以解释一下导致这种行为的原因并提出解决方案吗？

【问题讨论】：

在表单按钮内添加type="button"

@GeorgeBailey 谢谢，这似乎是完美的解决方案

【参考方案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>

【参考方案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>

【参考方案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>