CODEWITHSUNDEEP
javascriptjqueryjquery-events
Dimskiy
Dimskiy

Reputation: 5301

An elegant way of handling click and keypress in the same function

I have a bunch of places where I have to code the same functionality for a click and an ENTER key press (keyup). I'm ending up writing event handlers like this:

$('#SomeElement').on('click keyup', function (e) {
  if (e.type === 'click' || e.type === 'keyup' && e.keyCode === 13) {
    //  do what needs to be done
  }
});

Is there an elegant way of handling this without the if statement? I hate the fact that it's an event handler specific to click and keyup, yet I have to check the event type inside the handler.

EDIT: I'm OK with abstracting out the if statement into a separate function. As long as I don't have to copy/paste the same line of code over and over again.

Upvotes: 0

Views: 1121

Answers (5)

Dimskiy
Dimskiy

Reputation: 5301

My final solution - jQuery Event Extensions.

Create jQuery event extension specific for ENTER key. 

$.event.special.enterkey = {
    delegateType: 'keyup',
    bindType: 'keyup',
    handle: function (event) {
        if (event.keyCode === 13)
            return event.handleObj.handler.apply(this, arguments);
    }
};

Now all I have to do is the following. Neat and elegant.

$('#SomeElement').on('click enterkey', function (e) {
    //  do what needs to be done
});

P.S. To all the incognito downvoters - you should be ashamed of yourselves.

Upvotes: 1

AvcS
AvcS

Reputation: 2323

You will need an if condition to confirm if the key pressed is enter. So you cannot completely get rid of if condition there.

But you can get rid of redundant conditions, like you don't need to check if the event type is keyup as we know if the event is not click, it will definitely be a keyup event.

So you can reduce your condition to

e.type === 'click' || e.keyCode === 13

Upvotes: 1

unclepaul84
unclepaul84

Reputation: 1404

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

(function( $ ) {
 
    $.fn.clickOrKeyPress = function( callback ) {

      this.on('click keyup', function (e) {

        if (e.type === 'click' || e.type === 'keyup' && e.keyCode === 13) {
          callback(e);
        }
          
      });
 
        return this;

    };
 
}( jQuery ));

Upvotes: 2

Rehan Umar
Rehan Umar

Reputation: 179

I didn't understand clearly what you mean by "I have a bunch of places where I have to code the same functionality". But according to my understanding you want to attach some handlers to some elements that involve this check.

function doSomething(e) {
  //do what needs to be done
}

function handleEvent(attachedHandler) {
  return function(e) {
     if (e.type === 'click' || e.type === 'keyup' && e.keyCode === 13) {
      attachedHandler(e);
     } 
   };
}

$('#SomeElement').on('click keyup', handleEvent(doSomething));

lemme know if it helps you...

Upvotes: 0

Lucas Jahn
Lucas Jahn

Reputation: 306

I have not tested this yet, but maybe you can do named function and pass it with another callback to the event handler?...

Example (not tested!):

// Define the callback function somewhere
function clickKeyupCallback(e, callback) {
  if (e.type === 'click' || e.type === 'keyup' && e.keyCode === 13) {
        return callback;
  }
}



$('#SomeElement').on('click keyup', clickKeyUpCallback(e, function() {
  // your normal code here
  
  
}));

// EDIT

I realized the named function has to sit on a different place here if you want to do it this way and abstract the "if" part.

another example:

// Define the callback function somewhere
function clickKeyupCallback(e, callback) {
  if (e.type === 'click' || e.type === 'keyup' && e.keyCode === 13) {
    callback();
  }
}


$('#SomeElement').on('click keyup', function(e) {
  clickKeyupCallback(e, function() {
    // do what ever needs to be done

  });
});

Upvotes: 0

Related Questions