Prevenir el evento predeterminado para la combinación de teclas de jQuery en Firefox

Question

Tengo un código jQuery que crea una matriz de elementos enfocables y enlaza .keydown para las flechas izquierda y derecha para desplazarse por ellos. En Chrome, IE y Safari comenzando con preventDefault() o terminando con un retorno falso (que técnicamente no quiero usar porque no necesito stopPropagation()) previene el evento predeterminado de las flechas, pero en Firefox no lo hace.

¿Cómo puedo evitar la acción predeterminada en Firefox también?

Aquí está el código, que funciona como se esperaba, excepto en Firefox, donde el evento predeterminado se dispara además de mi devolución de llamada.

$(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

El evento de pulsación de tecla es el que debería cancelarse, pero Firefox ignora preventDefault() en este escenario. Así que la solución es difuminar el menú desplegable actual, dejar que el evento de pulsación de tecla se active en el documento y establecer el foco en el nuevo menú desplegable a través del tiempo de espera.

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 en http://jsfiddle.net/roberkules/3vA53/

Answer 2

Has probado esto?

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