Enable and Disable mouse click event in jQuery

Question

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>

.off removes the event entirely. If you need to get it back, you'll have to reassign the function. Can't you disable the button? — Phiter
– Phiter, Commented Sep 17, 2018 at 16:22
If I can do it with disable the button, but I want to see why it is not working with setTimeout or mouseleave, if I am activating it again with on clcik, is it a correct way to activate it again, or is there another way to do it? — Learning and sharing
– Learning and sharing, Commented Sep 17, 2018 at 16:24

Calvin Nunes · Accepted Answer · 2018-09-17 17:42:43Z

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.

samnu pel · Accepted Answer · 2018-09-17 16:24:56Z

0

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

});

answered Sep 17, 2018 at 16:24

samnu pel

9245 silver badges13 bronze badges

Comments

Austio · Accepted Answer · 2018-09-17 16:25:07Z

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)

Collectives™ on Stack Overflow

Enable and Disable mouse click event in jQuery

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related