onclick() and onblur() ordering issue

Question

I have an input field that brings up a custom drop-down menu. I would like the following functionality:

• When the user clicks anywhere outside the input field,

Answer 1

A more elegant (but likely less performant) solution:

Instead of using the input's onblur to remove the menu, use document.onclick, which fires after onblur.

However, this also means that the menu is removed when the input itself is clicked on, which is undesired behaviour. Set an input.onclick with event.stopPropagation() to avoid propagating clicks to the document click event.