javascript - 防止特定的默认操作

Question

我正在尝试创建一个简单的网络应用程序。 该应用程序包括一个简单的 Html 界面:

<form>
  <label for="number">You are welcome to enter a Number:</label>
  <input type="number" id="number" min="1" max="20">

  <button>Submit</button>
</form>

Html 上附加了一个脚本，只要单击按钮，该脚本就会运行。为了防止发送表单和重新加载页面，我使用了 preventDefault()。它很好地防止了这种情况的发生，但它也防止了 min 和 max 属性的发生。

我的问题是:是否有一个选项可以仅阻止事件的一个(或某些)默认操作？

Answer 1

浏览器中的事件往往会形成“链”。即，按钮引发“单击”事件，浏览器通过执行验证来响应该事件，验证根据结果引发其自己的事件，这可能导致浏览器执行提交操作，从而再次引发其自己的事件。

我相信您所做的是将事件监听器添加到按钮本身，并阻止会触发表单验证的“单击”事件。作为副作用，您还阻止了表单的提交。

换句话说，您只“阻止”了一个事件 - 但由于它们发生在一个链中，因此您已经破坏了链的其余部分。

在我看来，您想要做的是保留浏览器的内置表单验证行为(即强制执行 min 和 max 属性的部分)，但会阻止浏览器内置的“提交”功能(即导致页面重新加载的部分)。

您想要做的是向表单的“提交”事件添加事件监听器。这种情况发生在验证之后，您可以“阻止”该事件，以便浏览器不会执行正常的提交操作。这样，浏览器仍然会进行表单验证，并且您的代码仅在验证通过时运行。

function onSubmit(event)
{
  event.preventDefault();
  console.log('submit event prevented');
  // do other stuff here
  // this code only runs if form validation passed successfully
}

document.getElementById('form').addEventListener('submit', onSubmit);

<form id="form">
  <label for="number">You are welcome to enter a Number:</label>
  <input type="number" id="number" min="1" max="20">

  <button>Submit</button>
</form>