كيفية تعطيل النقر المزدوج باستخدام jquery


أريد تعطيل النقر المزدوج والسماح بنقرة واحدة فقط. لقد قمت بتجربة الكود التالي، لكنه لم ينجح. ما هو الخطأ هنا. أنا أعمل في بناء جملة mvc Razor.
ما أريده هو، عندما ينقر المستخدم على حفظ الرسالة الزر، فإنه يحفظ الحرف، ولكن إذا نقر المستخدم عليه مرتين، فلن يؤدي ذلك إلى تشغيل أي شيء.

ما حاولت:

لغة البرمجة
<a id="SaveLetterBtn" class="button-create-letters bg-dark2 white SaveLetterBtn" href="@Url.Action("SaveLetter", "Letters")">Save Letter</a>
جافا سكريبت
$("#SaveLetterBtn").on("click", function(event) {
      event.preventDefault();

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

الكود 2

جافا سكريبت
$("#SaveLetterBtn").on('dblclick', function (e) {
               e.preventDefault();
           });

الحل 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>

جافا سكريبت
<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 مللي ثانية (ثانية واحدة). اضبط التأخير وفقًا لمتطلباتك. سيؤدي هذا التأخير إلى منع إمكانية النقر على الزر خلال هذا الإطار الزمني.

الحل 3

امتحان!

تم النقر على فار = خطأ؛

$(“#testBtn”).on(‘click’, function(e) {
إذا (تم النقر == صحيح) {
console.log(“النقر محظور!”);
تم النقر = خطأ؛
}
آخر {
console.log(“النقر مسموح به!”);
e.preventDefault();
تم النقر = صحيح؛
}
});

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

コメント

タイトルとURLをコピーしました