防止特定的默认操作

Question

我正在尝试创建一个简单的Web应用程序。该应用程序包括一个简单的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

浏览器中的事件倾向于形成“链”。即，该按钮引发“单击”事件，浏览器通过执行验证对此做出响应，验证会根据结果引发其自身的事件，这可能导致浏览器执行Submit操作，从而再次引发其自身的事件。] >

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

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

在我看来，您想要做的是保留浏览器的内置表单验证行为（即，用于强制执行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>

Answer 2

[See running code here.这是什么，就是您想要的东西：