Cách tắt nhấp đúp bằng jquery

[ad_1]

Tôi muốn tắt nhấp đúp và chỉ cho phép nhấp một lần. Tôi đã thử đoạn mã sau nhưng nó không hoạt động. Có chuyện gì thế này? Tôi đang làm việc theo cú pháp mvc Razor.
Điều tôi muốn là, khi người dùng nhấp vào Lưu thư nút, nó sẽ lưu chữ cái, nhưng nếu người dùng nhấp đúp vào nó, nó sẽ không kích hoạt bất cứ thứ gì.

Những gì tôi đã thử:

HTML

<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);
    });

Mã 2

JavaScript

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

Giải pháp 2
Giải pháp 1
Giải pháp 3

Giải pháp 2

Bạn chỉ có thể xử lý sự kiện dblclick và không làm gì với nó.

HTML

<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>

Giải pháp 1

Để ngăn hành động nhấp đúp, bạn nên tắt nút này ở lần nhấp đầu tiên và sau đó kích hoạt lại nút này sau một khoảng thời gian trễ nhất định. Dưới đây là ví dụ về cách bạn có thể sửa đổi mã của mình để đạt được chức năng này:

HTML

<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>

Trong mã được sửa đổi này, nút này bị tắt ở lần nhấp đầu tiên và được bật lại sau độ trễ 1000 mili giây (1 giây). Điều chỉnh độ trễ theo yêu cầu của bạn. Sự chậm trễ này sẽ khiến nút không thể nhấp được trong khung thời gian đó.

Giải pháp 3

Bài kiểm tra!

var đã nhấp = false;

$(“#testBtn”).on(‘click’, function(e) {
if (đã nhấp == true) {
console.log(“Click bị chặn!”);
đã nhấp vào = sai;
}
khác {
console.log(“Cho phép nhấp chuột!”);
e.preventDefault();
đã nhấp vào = đúng;
}
});

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

[ad_2]