jquery - eventos - touch events javascript library

Evite el evento predeterminado para el ajuste 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 return false (que técnicamente no quiero usar porque no necesito stopPropagation() ) previene el evento predeterminado de las flechas, pero en Firefox no.

¿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);
}
});
});

Demostración en http://jsfiddle.net/roberkules/3vA53/

Answer 2

¿Has probado esto?

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