的Html - 空格鍵按下導致的OnClick被觸發

[注：此漏洞只發生在Internet Explorer 11這是IE9，Chrome和Firefox的罰款。]的Html - 空格鍵按下導致的OnClick被觸發

我有下面的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";

的人進入在文本框中輸入一些東西，點擊觸發其運行功能doStuff onclick事件（按鈕）。在doStuff（）中，下面的代碼行返回到剛剛可見的canvas div：

window.location = "#";

這個工作非常棒。

現在的問題。遊戲狀態處於暫停狀態，而用於切換暫停狀態的首選鍵是空格鍵。（任何其他鍵和東西都可以，但問題是我想使用空格鍵）。

所以我按空格鍵，這是（不必要地）觸發按鈕的onclick事件在模態對話框的div 再次（即使模態的div不再可見），這顯然調用doStuff（）函數再次。

當Modal Div不再可見時，如何停止觸發Modal Div按鈕onclick事件的空格鍵？

來源

2014-10-08 Rewind

你可以用onmousedown替換onclick，但是它不適用於移動設備。 – GSaunders 2014-10-08 17:04:54

你可以使用全局變量ignore在doStuff()任何邏輯，例如前，

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

那麼你的其他代碼更改爲類似：

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

和

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

可能有一種方法可以使用event.stopPropagation()來做到這一點，但我可以沒有找到一種方法來完成這項工作。

來源

2014-10-08 18:05:08 user3357118

感謝您的回覆。看起來我不得不使用它。我甚至尋找其他東西像currentStyle，但只存在於IE中。我希望能夠通過瀏覽器進行瀏覽，而不是一直需要由我改變的標誌。我會把問題留出一段時間，但看起來這將是答案。再次感謝你的回覆。 – Rewind 2014-10-09 13:37:50

可能在jquery中找到了一些東西，也就是$（「＃divModalDialogUpdate」）。is（「：visible」）。所以基本上做你所說的用jquery替換替換更新標誌。再次感謝。如果有人想到在onclick甚至被解僱之前停止空格鍵觸發的方法，我會稍微延長一段時間。 – Rewind 2014-10-09 13:48:26

當然。我也有興趣，如果任何人有事件福技能做到這一點:) – user3357118 2014-10-09 14:12:07

的Html - 空格鍵按下導致的OnClick被觸發

回答

相關問題