添加事件監聽器 + 不允許表單提交

Question

我有一個帶有提交按鈕的簡單注冊表：

<input type="submit" value="" class="loginInput" id="submitReg" />

和 javascript 函數來測量頁面加載和表單提交之間的時間（以毫秒為單位）：

(function () {
  var element = document.getElementById('submitReg'),
      start, end;

  window.onload = function (event) {
    start = +event.timeStamp; 
  };

  element.onclick = function (event) {
    end = +event.timeStamp;

    var diff = end - start; // time difference in milliseconds
    //alert(diff);
  };
})();

如何做到這一點，僅當diff>3000時才允許提交表單？ 我想我應該添加類似return true / return false東西，但我不知道如何。 謝謝解答！！！

Answer 1

在您的情況下，要根據條件提交表單 - 調整您的element.onclick事件，如下所示：

...
element.onclick = function (event) {
    end = +event.timeStamp;
    var diff = end - start; // time difference in milliseconds
    return (diff > 3000)? true : false;
};
...

Answer 2

如果允許提交表單，您可以只返回 true。 這是使用測試“onsubmit”功能修改的代碼：

(function () {
  var element = document.getElementById('submitReg'),
      the_form = document.getElementById('the_form'),
      current_time = document.getElementById('current_time'),
      start, end;

  window.onload = function (event) {
    start = +event.timeStamp; 
  };

  element.onclick = function (event) {
    end = +event.timeStamp;

    var diff = end - start; // time difference in milliseconds

    console.log(diff);

    //Allow the form to submit only after 3000 miliseconds
    if(diff > 3000){
      return true; 
    }
    return false;
  };

  //To test if this works...
  the_form.onsubmit = function(event){
    alert('Form submitted!');
  };
})();

工作示例： https : //codepen.io/sixfoot3/pen/qPzgQY