onBlur 事件阻止 onClick 事件

Question

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 1

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
  }

Answer 2

Thank you all for your answers. I will take nAviDs suggestion. Seems a little ugly with global variable but it seems the only way to do this.

For those who have the same problem: setTimeout is a little pedantic in my case. I had to set it in this way or timeout is never used:

var timer = null;
function timer_function(divname)
{
    timer = setTimeout(function(){document.getElementById(divname).style.display='none'}, 200);
}

I had to refocus to text box, if timeout gets cleared otherwise blur function is not working anymore.

Thank you for your time and help. :)

Answer 3

onmousedown active before onblur

div.addEventListener('mousedown', function(event) {
   event.preventDefault();
   event.stopPropagation();
});