Javascript 阻止特定的默认操作

我正在尝试创建一个简单的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

属性

---

我的问题是：是否有一个选项可以只阻止一个（或一些）事件的默认操作

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

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

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

---

在我看来，您想要做的是保留浏览器的内置表单验证行为（即强制执行

min

和

max

属性的部分），但防止浏览器的内置“提交”功能（即导致页面重新加载的部分）

您要做的是将事件侦听器添加到表单的“提交”事件中。这是在验证之后发生的，您可以“阻止”事件，以便浏览器不会执行正常的提交操作。这样，浏览器仍会执行表单验证，并且只有验证通过后，代码才会运行

提交函数（事件）
{
event.preventDefault（）；
console.log（“阻止提交事件”）；
//在这里做其他事情
//此代码仅在表单验证成功通过时运行
}
document.getElementById（'form'）。addEventListener（'submit'，onSubmit）

欢迎您输入一个号码：
提交
以下是“相信你想要的”：


var submitButton=document.querySelector（'button'）；
submitButton.onclick=函数（e）{
e、 预防默认值（）；
让data=document.querySelector（“#number”）；
让min=parseInt（data.getAttribute（'min'）；
设max=parseInt（data.getAttribute（'max'）；
设number=parseInt（data.value）| | false；
如果（数量>最小值&数量<最大值）{
警报（“验证通过”）；
}
}
min
和
max
不是“动作”。当您说“阻止最小和最大属性发生”时，您能更明确地说明您的意思吗？请向我们展示脚本，因为它可能对您更有用。如果您包含一些javascript，我们可能会有所帮助，这样我们就可以确切地看到您的脚本是如何“附加”到“html”的。i、 例如，它是表单的
OnSubmit
处理程序，还是按钮本身的
OnClick
处理程序？@WoodrowBarlow-
Submit
实际上是一个提交按钮。你链接到的页面是这样写的。@Quentin你是对的，那是我的疏忽。我从我的评论中删去了这一点。在最初的帖子中有一些模棱两可的地方，但我认为这不是作者想要的。我相信他们试图保持浏览器的内置表单验证，但会覆盖浏览器的内置“提交”行为。感谢您的解释和解决方案。它成功了，谢谢你。@很高兴听到。如果你不介意点击绿色的复选标记，这会给我一些分数，并向未来在谷歌搜索中发现这个问题的人发出信号，这个答案就是解决方案。
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");
  }
}