Click here to Skip to main content
15,850,446 members
Please Sign up or sign in to vote.
1.00/5 (1 vote)
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
Updated 24-Oct-23 12:25pm
v3

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>
 
Share this answer
 
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
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.
 
Share this answer
 
Comments
codiagirl 19-Oct-23 16:42pm    
Its not working, When I clicken on it again and again it,it triggers every time
M Imran Ansari 19-Oct-23 16:47pm    
Can you share your scenario through jsFiddle?
codiagirl 19-Oct-23 18:40pm    
https://jsfiddle.net/musfirahhamid/egrup1dx/3/
codiagirl 19-Oct-23 17:05pm    
https://jsfiddle.net/musfirahhamid/egrup1dx/3/

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



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900