Question

[注意：此漏洞仅发生在Internet Explorer 11中。在IE9，Chrome和Firefox中都很好。]

我有以下Css：

/*** pop-up div to cover entire area ***/
.divModalDialog  {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    /*! important !*/
    display:none;
    /* last attribute set darkness on scale: 0...1.0 */
    background-color:rgba(0,0,0,0.8);
    text-align:center;
    z-index:101;
}

/*** ! target attribute does the job ! ***/
.divModalDialog:target  { display:block; }

一个Html：

<div id="divModalDialogUpdate" class="divModalDialog">
    <div>
        <input type="text" id="divModalText" />
        <button onclick="doStuff();">Press</button>
    </div>
</div>
<div id="divCanvas" style="display: none; width:100%; height: 100%;">
    <canvas id="m_Canvas" width="200" height="200" oncontextmenu="return false;"></canvas>
</div>

如您所见，我使用divModalDialog作为模式对话框，它出现在画布div上。

在画布div上，游戏正在运行。当我需要启动模态对话框时，我暂停游戏，然后输入代码：

window.location = "#divModalDialogUpdate";

此人在文本框中输入一些内容，单击触发onclick事件的按钮，该事件运行函数doStuff（）。在doStuff（）中是以下代码行，它返回到可见的canvas div：

window.location = "#";

这很有效。

现在问题。游戏状态暂停，我切换暂停状态的首选键是Space键。（任何其他键和东西都没问题，但问题是我想使用空格键。）

所以我点击空格键，这是（不必要地）触发模式对话框div中的按钮的onclick事件再次（即使模态div不再可见），这显然会调用再次使用doStuff（）函数。

当模态Div不再可见时，如何停止空格键触发Modal Div的按钮onclick事件？

Answer 1

您可以在ignore中的任何逻辑之前使用全局变量doStuff()，例如，

function doStuff() {
    if(ignore == true) return;
    /* logic here ... */
}

然后将您的其他代码更改为：

ignore = false;
window.location = "#divModalDialogUpdate";

和

ignore = true;
window.location = "#";

可能有一种方法可以使用event.stopPropagation()执行此操作，但我找不到一种方法来完成这项工作。

Html - Space Key Press导致OnClick被触发

1 个答案: