How to handle onclick event correctly in conjunction with onblur

Question

The next post refers to the previous question that I asked here .

Although the two problems are independent, they relate to the same function that I am implementing - the predictive text.

The problem I'm facing is related to the way 2 onblur and onclick events are onblur .

The situation arises after the user typed several characters in the text field and decided that they would like to click on the sentence instead, and not finish typing the whole word.

I have an onlick handler attached to each sentence.

However, I also have an onblur handler attached to my text box.

The problem is that the onblur handler must CLOSE the offer window and destroy its contents.

The onlick handler needs content to copy the value of the clicked div and copy it into the text box.

Hence the dilemma. I cannot copy anything if it has already been destroyed by the onblur handler.

How to block the onblur event, but at the same time find out if the user clicked onblur on one of the sentences?

Hope my question makes sense.

Answer 1

I tried several different things, including wrapping both the text input field and my autorun div in the parent div and setting onblur to the parent, but nothing worked. Apparently, you cannot assign the onblur event to a div (since it cannot start focusing).

The answer was to set Timeout to the onblur event, as Set suggested.

 onblur="setTimeout(function() {closeSuggestionBox();}, 100);" 

I found a good explanation for this in a post here .