onBlur event prevents onClick event

I have an input text box with an onfocus and an onblur event. Under the text box is a div which is hidden by with display: none.

The div should be displayed if text box is focused and hide if blurred. This seem to work. Now I want to let the div stay visible or do any clicks on div if I click on div (or one of its contents) itself. This doesn’t work. The onBlur event prevents any events on the div. I already tried to identify which new element was clicked but can’t find any attribute which helps me. relatedTarget is NULL. At this time the only solution seems for me to add a onfocus on every other node besides the div and its children

Do you have any other ideas than this? Thank you for your help.

Jens

Answer

When onblur runs it will hide the div so when the click is going to be made it will not fired on div because the div is invisible. so :

 // use the following global variable
   var mytimer = null;
  
  function newOnBlur()
  {
     mytimer = setTimeout(YourCurrentOnBlurFunctionWihoutParentheses,150);
  }
  
  // clearTimeout in the first line of your click function
  function newOnClick()
  {
     clearTimeout(mytimer);
     //  rest of your click event
  }