如何使用 jquery 禁用双击

[ad_1]

我想禁用双击并只允许单击。我已经尝试过以下代码，但它不起作用。这里出了什么问题。我正在使用 mvc Razor 语法。
我想要的是，当用户点击 保存信件 按钮，它会保存该字母，但如果用户双击它，它不应该触发任何内容。

我尝试过的：

超文本标记语言

<a id="SaveLetterBtn" class="button-create-letters bg-dark2 white SaveLetterBtn" href="@Url.Action("SaveLetter", "Letters")">Save Letter</a>

JavaScript

$("#SaveLetterBtn").on("click", function(event) {
      event.preventDefault();

      $(this).attr("disabled", true);
    });

代码2

JavaScript

$("#SaveLetterBtn").on('dblclick', function (e) {
               e.preventDefault();
           });

解决方案2
解决方案1
解决方案3

解决方案2

您可以只处理 dblclick 事件而不对其执行任何操作。

超文本标记语言

<html>
<body>
    <button type="button" id="testBtn">Test!</button>

    <script type="text/javascript">
        const btn = document.querySelector("#testBtn");

        btn.addEventListener("dblclick", (e) => {
            e.preventDefault();
        });
    </script>
</body>
</html>

解决方案1

为了防止双击操作，您应该在第一次单击时禁用该按钮，然后在一定延迟后重新启用它。以下是如何修改代码以实现此功能的示例：

超文本标记语言

<a id="SaveLetterBtn" class="button-create-letters bg-dark2 white SaveLetterBtn" href="@Url.Action("SaveLetter", "Letters")">Save Letter</a>

JavaScript

<script>
  $(document).ready(function() {
    var clicked = false;
    $("#SaveLetterBtn").on("click", function(event) {
      if (clicked) {
        event.preventDefault();
        return;
      }
      clicked = true;
      var $this = $(this);
      $this.addClass('disabled');
      setTimeout(function() {
        clicked = false;
        $this.removeClass('disabled');
      }, 1000); // Set your desired delay in milliseconds here
    });
  });
</script>

在此修改后的代码中，该按钮在第一次单击时被禁用，并在延迟 1000 毫秒（1 秒）后重新启用。根据您的要求调整延迟。此延迟将阻止按钮在该时间范围内可点击。

解决方案3

测试！

var 点击= false;

$(“#testBtn”).on(‘点击’, 函数(e) {
如果（点击==真）{
console.log(“点击被阻止了！”);
点击=假；
}
别的 {
console.log(“允许点击！”);
e.preventDefault();
点击=真；
}
});

$(“#testBtn”).on(‘dblclick’, 函数(e) {
console.log(“DblClick!”);
});

[ad_2]