双击后如何禁用div

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)

    })

Answer 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

Answer 2

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

Answer 3

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