简体   繁体   中英

javascript() onclick hide element - doesn't work in firefox

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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM