how to disable a div after double click on it

Question

I have a div tag in my html. I want to disable it after I double click on it.

<div id="mydiv">
</div>


    $('#mydiv').on('click', function (event) {

        var count = parseInt($('#counter').html(), 10)
        count += 1
        $('#counter').html(count)
        $('#counter').attr("disabled", disabled)

    })

Possible duplicate of [how to differentiate single click event and double click event?](https://stackoverflow.com/questions/5497073/how-to-differentiate-single-click-event-and-double-click-event) — MauriceNino, Jul 15 '19 at 08:31

Llamathrust · Answer 1 · 2019-07-15T09:04:23.077

1

You can use the dblclick event as follows - this works exactly as the click event but the counter is no longer necessary

HTML

<div id="myDiv" style="background:red">Has not been double clicked</div>

JS (JQUERY)

$('#myDiv').on("dblclick",function(){
  this.innerHTML = "Was double clicked";
});

Live example - https://playcode.io/374412?tabs=script.js,preview

edited Jul 15 '19 at 09:04

answered Jul 15 '19 at 08:58

Llamathrust

41
3

score 0 · Answer 2 · answered Jul 15 '19 at 11:22

Jquery provides dblclick and unbind function. dblclick function trigger when mydiv is double clicked by user. You can write your code in instead alert. In addition if you want to remove the dblclick event once it is used or clicked

$( "#mydiv" ).dblclick(function() {
alert("sample");
//your code will go here
  $(this).unbind();
});

score -1 · Answer 3 · answered Jul 15 '19 at 08:41

-1

    let clicked = 0;
    $('#mydiv').on('click', function (event) {
    clicked =clicked+1;
    if(clicked>=2){
            $('#counter').attr("disabled", disabled); 
    } 
   })

answered Jul 15 '19 at 08:41

SHUBHAM SINGH

371
3
11

1

A double click = two clicks in low interval of time, your solution will add the `disabled`attr if user click two times in 5 min without reloading the page – Mickaël Leger Jul 15 '19 at 08:43

how to disable a div after double click on it

3 Answers3