Javascript中所有类实例的常见回调

Question

I've got a custom Javascript class that generates a JQuery mousedown callback. The mousedown callback is on $(document) and should really only be set for the first new instance, and not for any subsequent ones. I've got something like the following:

function myclass(arg){
   this.arg = arg;
   $(document).mousedown(function(down_event){
       // start action
   }).mouseup(function(){
      // stop action
      })
}

I'd like those callbacks to only register once in the event that multiple myclass instances are crated, and not at all if none are created.

Answer 1

You should use a variable to flag if the events have already been registered and register them only if they haven't already been registered.

An example of this:

var registered = false; // the 'flag' variable, default to false (i.e. not yet registered)

function myclass(arg){
   this.arg = arg;

   if (!registered) { // check the 'flag' variable if events have been registered yet
      registered = true; // set the 'flag' variable as events will be registered this time

      $(document).mousedown(function(down_event){
         // start action
      }).mouseup(function(){
         // stop action
      })
   }
}

Answer 2

Here are a couple of possible options.

Option 1: A global var

function myclass(arg){
   this.arg = arg;

   if (!window._myClassCreatedAlready) {
      $(document).mousedown(function(down_event){
          // start action
      }).mouseup(function(){
         // stop action
      })
   }
   window._myClassCreatedAlready = true;
}

Option 2: jQuery Data

function myclass(arg){
   this.arg = arg;

   if (!$.data(document, "mousedownset")) {
      $(document).mousedown(function(down_event){
          // start action
      }).mouseup(function(){
         // stop action
      })
   }
   $.data(document, "mousedownset", true);
}

Answer 3

There's a jQuery function for that. Use .one() to bind a handler to the first instance of an event raised on an element (in this case document ).

function myclass(arg){
    this.arg = arg;
    $(document)
        .one('mousedown.yourEvent', downHandler)
        .one('mouseup.yourEvent', upHandler);
}

function downHandler(e) {
    // start action
}

function upHandler(e) {
    // stop action

    //ensure event dead forever
    $(document).on('.yourEvent', function() { return false; });
}

Updated. The changes (using named handlers rather than anonymous functions, putting events in a specific namespace) are to ensure that new instances of myclass don't rebind to the event if they are created after the first one has finished being unbound.