ESC是否只有在模态可见时才触发back事件？
ESC是否只有在模态可见时才触发back事件？
提问于 2013-02-14 16:40:11
所以，我有一个纯粹的CSS模式窗口，我很满意；它很轻，而且速度很快。但是，我想添加一些我认为只能用javascript才能完成的特定功能--也就是说，我想要转义键触发模式的消失，然后点击覆盖来做同样的事情。
作为一个纯css模式，它依赖于:target伪属性，因此依赖于url。所以，我决定试试这个：
document.onkeydown = function(evt) {
evt = evt || window.event;
if (evt.keyCode == 27) {
history.go(-1);
}
};但是，通过在我的文档头中加载该信息，ESC将触发一个back事件，而不管该模式是否在屏幕上。我只想要ESC触发一个后退事件，如果按下，而模式是可见的。我该如何做到这一点？
顺便说一句，用于模式的css将容器display属性从none更改为block。
.modalWrap {
display:none;
z-index:40001;
}
#dbw.modalWrap:target {
display: block;
}HTML：
<div class="modalWrap" id="dbw">
content
</div>回答 2
Stack Overflow用户
回答已采纳
发布于 2013-02-14 19:28:04
不知怎么的，我设法找到了一个解决办法：
window.document.onkeydown = function (e)
{
if (!e) e = event;
if (e.keyCode == 27)
var elem = document.getElementById("dbw");
if (elem.currentStyle) {
var displayStyle = elem.currentStyle.display;
} else if (window.getComputedStyle) {
var displayStyle = window.getComputedStyle(elem, null).getPropertyValue("display");
}
if (displayStyle != 'none') {
history.go(-1);
}
}在ESC按下，检索id为"dbw“的div的显示样式，然后，如果它不等于none，则触发back事件。测试并完美无缺地工作。
如果有人确实提供了一个更简洁、更短的代码，那么我会将他们的答案标记为接受。
Stack Overflow用户
发布于 2013-02-14 16:43:48
document.onkeydown = function (evt) {
if (document.getElementById(modal_id).style.display != 'none') {
evt = evt || window.event;
if (evt.keyCode == 27) {
history.go(-1);
}
}
};参照Modal的display属性，评估屏幕上是否存在该display。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/14879714
复制相关文章
相似问题
腾讯云开发者
