javascript - 浏览器中不可见元素上的键盘快捷键

我想为页面上的按钮分配键盘快捷键。

事实证明，直接在标记中执行操作会导致危险的副作用:即使按钮不可见，快捷方式也会触发click事件。

我可以在前端 Controller 中动态设置/取消设置快捷方式，但这似乎有点麻烦。有更优雅的方法吗？非常感谢!

最佳答案

你应该可以做这样的事情

var shortcuts = {
    49: document.getElementById("button"), //character "1"
    50: document.getElementById("button2") //character "2"
};

var isVisible = function(el) {
    return !(el.style.display === "none" || el.style.visibility === "hidden");
};

var bindEvent = function(el, event, handler) {
  if (el.addEventListener){
    el.addEventListener(event, handler, false); 
  } else if (el.attachEvent){
    el.attachEvent('on'+event, handler);
  }
};

bindEvent(window, "keydown", function(e) {
    var charCode = (typeof e.which == "number") ? e.which : e.keyCode;
    if(typeof shortcuts[charCode] !== "undefined" && shortcuts[charCode] && isVisible(shortcuts[charCode])) {
        shortcuts[charCode].click();
    }
});

http://jsfiddle.net/Z2baQ/