主页 / 问题 / 1371362
Accepted
Дмытрык
Asked:2022-06-14 17:03:42 +0000 UTC2022-06-14 17:03:42 +0000 UTC

表单、输入、按钮标签 - 奇怪的行为

  • 772

问题的本质：当输入和按钮被包裹在一个表单中时，那么当你在输入上按下回车时，就会触发按钮上的点击事件。为什么会发生这种情况以及如何使单击按钮不起作用？

const btn = document.querySelector('button')
btn.addEventListener('click', (e) => {
  console.log(e.type, e.target.nodeName)
})



const form = document.querySelector('form')
form.addEventListener('submit', (e) => {
  e.preventDefault()
})
<form action="">
  <input type="text">
  <button>Кнопка</button>
</form>

javascript

1 个回答

  1. Best Answer

    感谢您的评论，为我指明了正确的方向。事实证明，可以通过断开按钮和表单之间的连接来解决问题。为此，按钮需要设置属性form，该属性将指向另一个表单。就我而言，我通常将此属性留空。

    const btn = document.querySelector('button')
btn.addEventListener('click', (e) => {
  console.log(e.type, e.target.nodeName)
})

const form = document.querySelector('form')
form.addEventListener('submit', (e) => {
  e.preventDefault()
})
    <form action="">
  <input type="text">
  <button form="">Кнопка</button>
</form>

    • 0

相关问题