jquery - Jquery esc hide方法不隐藏元素

Question

我正在制作一个灯箱画廊，但这段代码并没有隐藏当我按下esc键div时应该隐藏的灯箱。

$(document).keyup(function(e) {
    if(e.keyCode==27) {
        $("#lightbox").hide();
    }
});

我有这样的 DOM 元素：

<div id="lightbox">
    <div id="overlay">
        <div id="imageholder">
            <img name="lightboximage" src="images/demo/940x340.gif" height="600" width="700" align="left" />
            <div id="description">
                <h1><a href="url/cyberkiller.nishchal">Nishchal Gautam</a></h1>
                <p>Description about the image</p>
            </div>
        </div>
    </div>
</div>

我已将脚本放在这些元素下方，我是否遗漏了什么？

Answer 1

尝试使用keypress事件而不是keyup ..

$(document).on('keypress' , function(e) {
   var code = (e.keyCode ? e.keyCode : e.which);

   if(code ==27){
      $("#lightbox").hide();
   }
});

Answer 2

您应该简单地使用 e.which，因为并非所有浏览器都支持键码

$(document).keyup(function(e) {
  if(e.which==27)
  {
    $("#lightbox").hide();
  }
});

Answer 3

它在我的Firefox中运行良好，当我按ESC时，它会隐藏。你在用火狐吗？也许它不适用于其他浏览器。为了兼容性，您最好将其更改为此：

$(document).keyup(function(e) {
    var key = e.keyCode || e.which || e.charCode;
    if(key==27)
        $("#lightbox").hide();
}):

Answer 4

某些键（如 enter、tab、箭头键、Esc 等）需要使用 keypress 事件捕获，因此您最好使用 keypress 事件。

$(document).keypress(function(e){
    var key = (e.keyCode ? e.keyCode : e.which);
    if(key ==27){
        $("#lightbox").hide();
    }
});