防止在Firefox中使用jQuery keydown的默認事件

Question

我有jQuery代碼，它使得可聚焦元素的數組和綁定.keydown左右箭頭來通過它們進行選項卡。在Chrome，IE和Safari中以preventDefault()開頭或以返回錯誤結束（技術上我不想使用因爲我不需要stopPropagation()）會阻止箭頭的默認事件，但在Firefox中不會。

如何防止Firefox中的默認操作？

這裏是代碼，除了在我的回調以外，默認事件觸發的Firefox除外。

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

按鍵事件是需要取消的按鍵事件，但Firefox在此方案中忽略preventDefault（）。因此，解決方案是模糊當前下拉列表，讓按鍵事件在文檔上觸發，並通過超時將焦點設置爲新的下拉列表。

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

演示在http://jsfiddle.net/roberkules/3vA53/

Answer 2

你試過嗎？

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