CODEWITHSUNDEEP
javascriptjquery
Learning and sharing
Learning and sharing

Reputation: 1398

Enable and Disable mouse click event in jQuery

I need to disable the mouse Click event after clicking on a specific element, this is ready, but now I need to enable it after a few seconds or enable it with the Mouseleave event specifically. I have done the example but it is not working, why could that be happening?

$(function(){

	var i = 0;
	
  // Click element
  $('#data').on('click', this, function(){
    i ++;
    $('#count').html(i);
    // Disable click
    $('#data').off('click');
    // After a while, we enable the click again
    setTimeout(function(){
      $('#data').on('click');
    }, 2000);
  });

	// Or enable the click when we make a leavemouse
  $('#data').on('mouseleave', this, function(){
    $('#data').on('click');
  });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="data">Hello <span id="count"></span></div>

Upvotes: 2

Views: 2880

Answers (3)

Calvin Nunes
Calvin Nunes

Reputation: 6501

The easiest way is: Change from div to button and use disabled.
Why not a div?
A <div> with property disabled will not make any difference in this case...

A <button> with disabled won't be clickable, so just let the time goes out and enable it again, using your setTimeout() idea

mouseleave will not work if using the disabled idea, since a button that is disabled have it's mouse events set to none (at least in Chrome), so it doesn't recognize the mouseenter neither mouseleave...

$(function(){

  var i = 0;
  $('#data').on('click', this, function(){
    i++;
    $('#count').html(i);
    $('#data').prop('disabled', true);
    
    setTimeout(function(){
      $('#data').prop('disabled', false);
      console.log("#data is clickable again");
    }, 1000);
  });
  
});
#data{
  margin: 8px;
  padding: 6px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="data">Hello <span id="count"></span></button>

You can keep with your approach of using .off(), but it's not the best idea since you'll need to recreate the click listener every time.

Upvotes: 2

Austio
Austio

Reputation: 6095

So two things, you need to prevent the default event on click and also trigger the click when you want to. That will looks something like this (did not test in browser so may not be 100%)

$(function(){
  var i = 0;

    function triggerClick(selector) {
      return function() {
        $(selector).trigger("click")
      }
    }

  $('#data').on('click', this, function(event){
    // stop the click
    event.preventDefault();

    i ++;
    $('#count').html(i);

    setTimeout(triggerClick('#data'), 2000);
  });

    // Or enable the click when we make a leavemouse
  $('#data').on('mouseleave', this, triggerClick('#data'));
});

Something you will need to figure out is how to prevent double calling the event. So something like, the timeout firing and then they leave. Probably the way to handle would be to send the i value to the triggerClick and not fire if the current i is higher than the passed in one OR if it has already been fired (so you would have to keep a map of internal state for this one on what has been fired)

Upvotes: 0

samnu pel
samnu pel

Reputation: 914

Did you try disable attribute? If you are trying to just disable and enable..

If you want to use onClick then you have to wrap the the onclick operations in a separate function and bind the function to it. 

$(function(){

	var i = 0;
	
  // Click element
  $('#data').on('click', this, function(){
    i ++;
    $('#count').html(i);
    // Disable click
    $('#data').attr('disabled','disabled');
    // After a while, we enable the click again
    setTimeout(function(){
      $('#data').removeAttr('disabled');
    }, 2000);
  });

	// Or enable the click when we make a leavemouse
  $('#data').on('mouseleave', this, function(){
    $('#data').removeAttr('disabled');
  });

});

Upvotes: 0

Related Questions