javascript执行功能按'esc'键

Question

我有2个javascript函数：其中一个显示div'PhotoFull'另一个隐藏。 'PhotoFull'是一个容器Div ..只是黑色背景的另一个Div里面。当用户点击黑色背景时，PhotoFull dessapears ..但是如果也影响了'PhotoFull'里面的Div（PhotoFull dessapears，同时单击里面的div）。所以对于里面的Div我使用event.stopPropagation(); 这两个功能都有效，但是当按下“ESC”键时我还需要隐藏Div hideDiv()。 hideDiv()正在执行Div

 function showDiv() {
     document.getElementById('PhotoFull').style.display = "inherit";
     event.stopPropagation();
 }

 function hideDiv() {
     var target = event.target || event.srcElement;
     if (event.currentTarget == target) {
         document.getElementById('PhotoFull').style.display = "none";
     }
 }


window.onload=function() {
    document.onkeyup = key_event;
}

function key_event(e) {
    if (e.keyCode == 27) hideDiv();
}

和HTML：

<div id="PhotoFull" style="position: absolute; width: 100%; height: 100%; background-color: rgba(0,0,0, 0.75); display:none; z-index: 999;" onclick="hideDiv()">

 <div style="width: 960px; border-radius: 3px; background-color: #ffffff; margin-top: 100px;">
    <img id="one_full" src="numbers/1.jpg" style="max-width: 940px; margin: 10px;" />
 </div>

 </div>

没有event.stopPropagation();按ESC按钮执行功能hideDiv()但是没有任何反应。不知道为什么。 感谢您的关注

Answer 1

当您按Esc键时，它会进入hideDiv功能，但由于以下原因，条件会变为现实。

请参见图中的调试跟踪。

请参阅调试器中的 watchExpression 部分。我已添加事件对象进行观看。 您可以在上面的图片中的watchExpression中看到完整的对象描述。

您已在hideDiv函数中写下以下条件

 var target = event.target || event.srcElement;
 if (event.currentTarget == target) {
         document.getElementById('PhotoFull').style.display = "none";
 }

在调试跟踪中，您可以看到 event.currentTarget 是正文 目标 hideDiv函数中的局部变量是文档因为你已经添加了你的文档对象的监听器，可以从你的代码中看到

window.onload=function() {
    document.onkeyup = key_event;
}

所以解决方法是你必须在正确的对象上注册事件监听器。

使用下面的window.onload函数代码..

window.onload=function() {
    document.body.onkeyup = key_event;
}

Answer 2

window.onkeypress = keypress;

function keypress(event) {
  if (event.keyCode == 27) {
    alert("Hidding div *magic runing...*");  
  }
}

您应该考虑使用onkeypress事件来处理它。

Answer 3

试试这个，

            document.onkeydown=function(e){
                if(e.which == 27) {
                 hidediv();
                 return false;
                }
            }