How can I trigger an event ONLY when the user is tabbing backwards and NOT forward

Question

In jQuery How can I trigger an event ONLY when the user is tabbing backwards and NOT forward.

$('.menu-item-has-children a').keydown(function (e) {
    if(e.which === 9 && (!e.shiftKey)){
        console.log('Tabin forward');
        $('.sub-menu li:last-child').focusout(function() {
          console.log('check it out');
        $(this).parent().parent().removeClass('hover');
    });
 }
    else if (e.which === 9 && e.shiftKey) {
      $(this).parent().removeClass('hover');
    console.log("back Tab removed");
   }
});

Here is the code I am using but it doesn't seem to work. The first if statement still triggers when back tabbing (shift tab).

The problem is when I hit shift tab to back tab the tab event triggers as well which is the problem.

Any help or guidance would be greatly appreciated. Thank you.

Here is a JSFiddle Please Try the back tabbing. Notice it works ALL FOR when you backtab on the last LI in the submenu ... BECAUSE both events are triggering....

Answer 1

It could be that you're binding the keydown events to specific elements and not the whole document as a whole?

I've simplified what you are trying to do and it works as a standalone piece of code:

$(document).keydown(function (e) {
    if(e.which !== 9) return false;
    if(e.shiftKey){
        console.log('back Tab removed');
    }else{
        console.log("Tabin forward");
    }
});

What are you trying to achieve? It looks like you just want to open the sub menu on tabbing, in which case you can massively simplifiy your code: http://jsfiddle.net/X3cLb/4/