Question

我试图理解事件对象在.preventDefault（）方法的上下文中是如何工作的。现在我举个例子，如果我在on submit事件处理程序上使用event.preventDefault，它将阻止我触发提交事件。所以我尝试使用event.preventDefault（）在提交按钮上使用onclick事件处理程序，它也不允许我提交表单。从技术上讲，不允许用户点击按钮是不可能的。因此，我想确保并确切知道event.preventDefault与事件处理程序的确切关系。参考代码如下。这也引出了一个问题，在表单中声明的按钮的自然行为是什么，但是没有用提交类型定义？

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Prevent default example</title>
    <style>
      div {
        margin-bottom: 10px;
      }
    </style>
  </head>
  <body>
    <form>
      <div>
        <label for="fname">First name: </label>
        <input id="fname" type="text">
      </div>
      <div>
        <label for="lname">Last name: </label>
        <input id="lname" type="text">
      </div>
      <div>
        <input id="submit" type="submit">
      </div>
    </form>
    <p></p>
    <script>
      var form = document.querySelector('form');
      var fname = document.getElementById('fname');
      var lname = document.getElementById('lname');
      var submit = document.getElementById('submit');
      var para = document.querySelector('p');
      form.onclick = function(e) {
        if(fname.value === '' || lname.value === '') {
          e.preventDefault();
          para.textContent = 'You need to fill in both names!'
        }
      }
    </script>
  </body>
</html>

Answer 1

event.preventDefault函数阻止浏览器执行本机行为。

如果是提交按钮，则不会将数据提交给服务器并在此过程中重新加载页面，它会将数据处理留给您。

因此，如果您想使用AJAX提交表单数据，您可以定义处理数据的方式。

event.preventDefault如何处理无法停止的事件处理程序？

1 个答案: