Zapobiegaj domyślnemu zdarzeniu jQuery keydown w przeglądarce Firefox

Question

Mam kod jQuery, który tworzy tablicę elementów, które można aktywować i wiąże .keydown dla lewej i prawej strzałki, aby przechodzić między nimi. W Chrome, IE i Safari począwszy od preventDefault() lub kończącym się zwrotem false (którego technicznie nie chcę używać, ponieważ nie mam potrzeby, aby stopPropagation()) zapobiega domyślnemu zdarzeniu strzałek, ale w Firefoksie tak nie jest.

Jak mogę zapobiec domyślnej akcji w Firefoksie?

Oto kod, który działa zgodnie z oczekiwaniami, z wyjątkiem Firefoksa, w którym oprócz wywołania zwrotnego wywoływane jest domyślne zdarzenie.

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

Zdarzenie keypress jest tym, które należy anulować, ale Firefox ignoruje preventDefault() w tym scenariuszu. Rozwiązaniem jest zamazanie aktualnego menu rozwijanego, zezwolenie na naciśnięcie klawisza na dokument i ustawienie fokusu na nowe menu rozwijane za pomocą limitu czasu.

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

Answer 2

Czy próbowałeś tego?

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