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="in开发者_Go百科line 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

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

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

Actually, Firefox is correct. It should not tab to the next element because the keypress event is blocking the Tab key. Remove the keypress in order for the browser to apply the default key processing for the event.

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

does applying event.preventDefault(); solves your issue.