How to disable double click using jquery

Question

1.00/5 (1 vote)

See more:

I want to disable double click and allow only single click. I have tried the following code, but it did not work. What's wrong here. I am working in mvc Razor syntax.
What I want is, when user clicks on Save letter button, it saves the letter, but if user double clicks on it, it should not trigger anything.

What I have tried:

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

Code 2

JavaScript

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

Posted 19-Oct-23 10:23am

codiagirl

Updated 24-Oct-23 11:25am

Deeksha Shenoy

v3

Add a Solution

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Dave Kreskowiak · Answer 1 · 2023-10-19T12:51:00

Solution 2

You can just handle the dblclick event and not do anything with it.

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>

Posted 19-Oct-23 12:51pm

Dave Kreskowiak

Comments

codiagirl 20-Oct-23 7:04am

I am doing the same thing, but not working

Dave Kreskowiak 20-Oct-23 9:15am

I see what you're getting. When you have a user clicking twice, in quick succession, on a button, you get 2 click events and a dblclick event. You're looking at this like you're only supposed to be getting a single event, dblclick. That's not the case.
You can see that in the following code. Run it and double-click the button, then look in the Console.

<html>
<head>
    <script src="jquery-3.7.1.min.js"></script>
</head>
<body>
    <button type="button" id="testBtn">Test!</button>

    <script type="text/javascript">
	$("#testBtn").on('click', function(e) {
            console.log("Click!");
        });

	$("#testBtn").on('dblclick', function(e) {
            console.log("DblClick!");
        });
    </script>
</body>
</html>

You're trying to prevent the second click event from happening. The mistake in the code in the other solution is checking for the value of clicked. You have to explicitly check for the value == true for it to work:

<html>
<head>
    <script src="jquery-3.7.1.min.js"></script>
</head>
<body>
    <button type="button" id="testBtn">Test!</button>

    <script type="text/javascript">
        var clicked = false;

	$("#testBtn").on('click', function(e) {
            if (clicked == true) {
                console.log("Click blocked!");
                clicked = false;
            }
            else {
                console.log("Click allowed!");
                e.preventDefault();
                clicked = true;
            }
        });

	$("#testBtn").on('dblclick', function(e) {
            console.log("DblClick!");
        });
    </script>
</body>
</html>

codiagirl 20-Oct-23 9:42am

not working

Dave Kreskowiak 20-Oct-23 11:29am

I have no idea what you're doing. This code works as described. If it's failing, it's because there's some minor difference I can't see because you have not posted exactly what you're using.

codiagirl 20-Oct-23 13:36pm

so when user click on this button, it will print letter, if user select all checkbox button it will print letter, that's working, but if user has not selected any letter,then it will show alert "Please select any letter", so in case of alert message,I want to disable button immediately after one click. currently if I click double, it shows multiple alert messages,one after another

Dave Kreskowiak 20-Oct-23 13:54pm

That gives me absolutely nothing to work with. You either show the code you have for the handling that button or we're done here.

codiagirl 20-Oct-23 14:02pm

$(".PrintAllBtn").click(function (e) {
e.preventDefault();
var errorMessage = PrintLetter.CheckEmailValidation();
if (errorMessage == '') {
$('#customErrorDiv').hide();
PrintLetter.PrintAll();
}
else {
$('#customErrorDiv').find('ul').html(errorMessage);
$('#customErrorDiv').show();
}
});

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

codiagirl 20-Oct-23 14:05pm

Print All

Dave Kreskowiak 20-Oct-23 14:16pm

OK, you haven't modified the click function handler at all to match anything like the examples posted, and you wonder why it doesn't work.

M Imran Ansari · Answer 2 · 2023-10-19T10:38:00

To prevent a double-click action, you should disable the button on the first click and then re-enable it after a certain delay. Here is an example of how you can modify your code to achieve this functionality:

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>

In this modified code, the button is disabled on the first click and re-enabled after a delay of 1000 milliseconds (1 second). Adjust the delay as per your requirements. This delay will prevent the button from being clickable during that time frame.

How to disable double click using jquery

2 solutions

Solution 2

Solution 1

Add your solution here

Preview 0

Existing Members

...or Join us