javascript - onblur() is not working while onclick() is working fine -

i need make notification list appear on click working fine. onblur() not working @ all. here fiddle: http://jsfiddle.net/ex2zq/

code:

html:-

<div class="one" onclick="hidetwo();" onblur="remove_the_notification();">     <div>          <ul class="dropdown" id="notification" >             <li><a href="#">kjhlkjhkjhklhjklj</a></li>             <li><a href="#">kjhlkjhkjhklhjklj</a></li>             <li><a href="#">kjhlkjhkjhklhjklj</a></li>             <li><a href="#">see_all</a></li>         </ul>        </div> </div> 

css:-

.one{     overflow: visible;      width: 21px;      height: 21px;      background-color:black;  } 

js:-

var show=0;      function hidetwo(){     if (show==0){     document.getelementbyid('notification').style.display="block";     show=1;     }     else if (show==1){     document.getelementbyid('notification').style.display="none";     show=0;     }     }  function remove_the_notification(){     alert('hide one');     if (show==0){     document.getelementbyid('notification').style.display="block";     show=1;     }     else if (show==1){     document.getelementbyid('notification').style.display="none";     show=0;     } } 

you have onload selected in jsfiddle options. means functions hoisted after on page loaded, , references aren't available @ time handlers attached. also, afaik, without contenteditable can't 'blur' <div> - event form elements inputs. perhaps meant onmouseleave?

<div class="one" onclick="hidetwo();" onmouseleave="remove_the_notification();"> 

jsfiddle