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

Jquery esc hide方法没有隐藏元素

4 个答案: