Question

提交HTML表单后，即使我的提交功能中包含e.preventDefault()命令，网页也会重新加载。

$("#room-code-form").addEventListener("submit", function(e) {
  e.preventDefault();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="room-code-form">
  <input type="text" />
  <input type="submit" />
</form>

Answer 1

尝试使用提交功能。您需要将其绑定到Document Ready函数中

$(document).ready(function() {
  $("#room-code-form").submit(function(e) {
    e.preventDefault();
  });
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="room-code-form">
  <input type="text" />
  <input type="submit" />
</form>

或

$("#room-code-form").submit(function(e) {
   return false;
});

Answer 2

您必须将on()或bind()与jquery一起使用，而不是addeventlistener。
jQuery事件处理程序中的return false也实际上与对传递的jQuery.Event对象调用e.preventDefault和e.stopPropagation相同。

$("#room-code-form").on("submit", function(e) {
  e.preventDefault();
});

<form id="room-code-form">
  <input type="text" />
  <input type="submit" />
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

e.preventDefault（）不适用于表单提交

2 个答案: