如何防止chrome中双击提交按钮

Question

我想禁用两次提交表单。用户经常双击提交按钮，然后表单被提交两次。我已经尝试过以下 Javascript，但不起作用：

const btn = document.querySelector("#buttonid");
btn.addEventListener("dblclick", (e) => {
  e.preventDefault();
});
const button = document.querySelector("#buttonid");
button.addEventListener("click", (e) => {
  document.getElementById("buttonid").disabled = true;
});
$('#buttonid').prop("disabled", true);

<button ondblclick="this.disabled=true;">submit</button>

Answer 1

单击一下即可禁用该按钮。

const button = document.querySelector("#buttonid");
var clickFunc = ()=> {
  button.disabled = true;
}
 

#buttonid{
padding: 10px 24px;
border: solid 2px;
color: green;
border-radius: 6px;
font-size: 16px;
letter-spaching: .7px;
background-color: #fff;
}

#buttonid[disabled]{
color: #ddd;
}

<button onclick="clickFunc()" id="buttonid">Submit</button>