防止特定的默认操作

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>

Answer 2

这就是你想要的：

See code here

var submitButton = document.querySelector('button');
submitButton.onclick = function(e) {
  e.preventDefault();
  let data = document.querySelector('#number');

  let min = parseInt(data.getAttribute('min'));
  let max = parseInt(data.getAttribute('max'));
  let number = parseInt(data.value) || false;
  if (number > min &&  number < max) {
    alert("validation passed");
  }
}