Suspending event listeners

问题:

I've got a button with an onclick event listener attached (in MooTools). It works fine. However, I want to be able to make the button unavailable at a certain time, and make it available again when necessary.

Simply put: I want to 'suspend' the event listener. Can this be done? The MooTools docs only go into adding, removing, cloning and propagation of events. Not 'ignoring' them for a while.

I understand the solution for this can lie elsewhere:

1. Hide the button with some css, e.g. $('button').setStyle('visibility', 'hidden') and let it show up again later
2. Some overlay, again hiding the original element, and showing a substitute (grayed out button for instance)
3. Cloning the element, removing all the events from the original (making the button 'unavailable'), then replace the original with the clone (thus making it available again)
4. Let the function attached to the event listener check if the button is available or not

However, this is a bit beside the point and seems more elaborate then necessary. My question is if and how I can control the event listener, basically: can I suspend it?

EDIT:

I guess the answer is 'no'. This means doing one of the four things mentioned above, or as mentioned in the answer I accepted: disable the button HTML-element, thus suspending the response to event listeners.

回答1:

I'd see two ways to do this:

1. Disable the element. When the element has the disabled state, event listeners are disabled on it.
2. Remove the event listener. That means you have to re-add it once you want to enable it again. Which means you may add your code to add the event in a function so that it is reusable.

回答2:

While you've found a solution, and some of the answer here seems to give you good suggestion I write this to completeness.

While in my opinion, the correct way to handle your problem is to add a css class (remember that you can have any number of class added as you want) to your "button" (where button can be any kind of element) and to check for the existence of that class in your click handler with a solution like this one:

$('button.one').addEvent('click', function(){
   if(this.hasClass('disabled'))return;    
   alert('You just clicked me, guy!');
});

like in this example:

http://jsfiddle.net/kentaromiura/CUeC4/

another path is to add a custom event like this one:

Element.Events.enabledClick = {
base:'click',
condition: function(event){
     var trigger = true;
     if(this.hasClass('disabled')){
        trigger = false;
     }
     return trigger;
}};

so anytime you need to put your event handler to sleep you just add a "disabled" class on the button you need and forgot it, to re-enable the event just remove the "disabled" class, instead of addEvent('click', ...) you just use addEvent('enabledClick', ...)

on this fiddle the same example as above, using this technique: http://jsfiddle.net/kentaromiura/yUnqw/

On my example I've just used the .disabled class in the css to style the button as disabled, but if you like to make it disappear, you can use tween to set the opacity:

http://jsfiddle.net/kentaromiura/KLqAc/

回答3:

If the library doesn't support suspending the event, another option would be to just set a flag when you want to ignore it, then check it at the start of your function:

function doStuff() {
    if (myFlag) {
        return;
    }
}