onBlur event prevents onClick event

0
votes

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

3
javascriptonbluronfocus
Please go read How to Ask and minimal reproducible example, and then edit your question accordingly. – CBroe
(I am guessing, that a short timeout before you set the div back to display:none, would probably help. If any click inside the div happens within that time span, you’d have to clear the timeout then.) – CBroe
what you can do is: div on click event, add a class name "active" and on your on blur event add if statement check if the div has "active" class, if no display:none , if yes display: block. if you want i can share some code – Elnatan vazana
@Elnatanvazana Thank you for your answer. I can't do this. My onblur prevents the onclick of div. I want the div to disappear if I click elsewhere but on div. – Hans Wurst

3 Answers

1
votes

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
  }
1
votes

onmousedown active before onblur

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

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. :)