I have javascript that onclick shows and hides element defining style.display = "inherit";
And style.display = "none";
..
' Hide ' function also is running when ESC button is pressed.. Everything works fine in CHROME, OPERA etc.. except FIREFOX..
window.onload=function() {
document.body.onkeyup = key_event;
}
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";
}
}
function key_event(e) {
if (e.keyCode == 27) hideDiv();
}
showDiv() works, but hideDiv doesn't..
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: 1000px'>
SOME CONTENT
</div>
</div>
Here is the JSFIDDLE: http://jsfiddle.net/5e6ww93h/2/
Thanks for attention
Syntaxically, you have to pass the event obj to your hideDiv function
function hideDiv(event) {
var target = event.target || event.srcElement;
if (event.currentTarget == target) {
document.getElementById('PhotoFull').style.display = "none";
}
}
function key_event(e) {
if (e.keyCode == 27) hideDiv(e);
}
Try below
window.onload=function() {
document.body.onkeyup = key_event;
}
function showDiv() {
document.getElementById('PhotoFull').style.display = "inherit";
event.stopPropagation();
}
function hideDiv(e) {
var target = e.target || e.srcElement;
if (e.currentTarget == target) {
document.getElementById('PhotoFull').style.display = "none";
}
}
function key_event(e) {
if (e.keyCode == 27)
hideDiv(e);
}
fiddler:- http://jsfiddle.net/5e6ww93h/4/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.