Previene l'evento di default per il keydown jQuery in Firefox

Question

Ho il codice jQuery che crea una serie di elementi focalizzabili e associa .keydown per le frecce sinistra e destra per sfogliarli. In Chrome, IE e Safari che iniziano con preventDefault() o terminano con un falso return (che tecnicamente non desidero utilizzare perché non ho bisogno di stopPropagation()) impedisce l'evento predefinito delle frecce, ma in Firefox no.

Come è possibile impedire l'azione predefinita anche in Firefox?

Ecco il codice, che funziona come previsto, tranne in Firefox, in cui viene attivato l'evento predefinito oltre alla mia richiamata.

$(function() { 
    var focusables = $(":focusable"); 
    focusables.eq(0).focus(); 
    focusables.eq(0).select(); 
    focusables.each(function() { 
     $(this).keydown(function (e) { 
      if (e.which == '37') { // left-arrow 
       e.preventDefault(); 
       var current = focusables.index(this), 
        next = focusables.eq(current - 1).length ? focusables.eq(current - 1) : focusables.eq(0); 
       next.focus(); 
       next.select(); 
      } 
      if (e.which == '39') { // right-arrow 
       e.preventDefault(); 
       var current = focusables.index(this), 
        next = focusables.eq(current + 1).length ? focusables.eq(current + 1) : focusables.eq(0); 
       next.focus(); 
       next.select(); 
      } 
     }); 
    }); 
}); 

Answer 1

L'evento keypress è quello che dovrebbe essere annullato, ma Firefox ignora preventDefault() in questo scenario. Quindi la soluzione è sfocare il menu a discesa corrente, lasciare che l'evento keypress venga attivato sul documento e impostare lo stato attivo sul nuovo menu a discesa tramite timeout.

var focusables = $(":focusable"); 
focusables.eq(0).focus().select(); 
focusables.each(function() { 
    $(this).keydown(function (e) { 
     if (e.which == '37') { // left-arrow 
      e.preventDefault(); 
      var current = focusables.index(this), 
       next = focusables.eq(current - 1).length ? focusables.eq(current - 1) : focusables.eq(0); 
      this.blur(); 
      setTimeout(function() { next.focus().select(); }, 50); 
     } 
     if (e.which == '39') { // right-arrow 
      e.preventDefault(); 
      var current = focusables.index(this), 
       next = focusables.eq(current + 1).length ? focusables.eq(current + 1) : focusables.eq(0); 
      this.blur(); 
      setTimeout(function() { next.focus().select(); }, 50); 
     } 
    }); 
}); 

Demo a http://jsfiddle.net/roberkules/3vA53/

Answer 2

Hai provato questo?

$(selector).click(function(event) { 
    event.preventDefault(); 
});