Tabbing issues when using return false on href="#" in FireFox

Peoples of Stack Overflow,

I'm putting together a form that has free standing help text and other links that have no specific destination, but are required to fire some jQuery function.

For example :

<a href="#" class="inline helpTrigger cursor">Why do we ask for this?</a>

On click or keypress of this link, a help bubble appears beside the text. As this href has a value ("#"), I have to write a function (as below) to stop the page from 'jumping' to the top:

$('a[href="#"]').bind('click keypress', function(event){
    return false;
});

This works for most browsers, but FireFox gets stuck when tabbing through and won't moves past this element. Is there a better way of doing this, or is this a known FF issue?

I have tried leaving the href completely blank - but this is neither semantically correct, or does not work in IE.

Any help would be much appreciated. Thanks

Solution

You could always check which key was pressed and continue accordingly?

 var code = (event.keyCode ? event.keyCode : event.which);
 if(code == 9) {
   //Do something
 }