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时，它隐藏起来。 你在用firefox吗？ 也许它不适用于其他浏览器。 为了兼容性，你最好把它改成这个：

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

Answer 4

某些键，如输入，制表符，箭头键，Esc等...需要使用按键事件捕获，因此您最好使用按键事件。

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