Onblur and link elements do not work properly in Chrome - Fine in IE 10

Question

I am trying to achieve the following. Click on the link, display menu. As soon as this menu loses focus, clear the menu (also, when the menu button is pressed, delete the menu).

Here is my dumbfounded code:

<a id="owner" href="javascript: doThis();" onblur="remove();">ClickOnMe</a> function doThis() { console.log('clickedOnItem'); } function remove() { console.log('removed'); } 

I can't get this to work. It works fine in IE10, but I can't work in Chrome.

Tell me this: http://jsfiddle.net/5t6wr/5/

Answer 1

For some reason, chrome does not register your link as a focused element. We need to force the link to be attached so that chrome recognizes it.

Change the link to the following link:

 <a id="owner" href="javascript: document.getElementById('owner').focus(); doThis();" >ClickOnMe</a> 

We added focus to the owner, then set about your function to open the menu.

Inside your doThis function, you need to add the following:

 document.activeElement.onblur = function() { remove(); }; 

This will take the current active element - and when the focus is lost, run the script to close the window.

Note. You must put the delete function in a timeout, since you will load something from the menu and do not want to trigger both triggers at the same time, this will cause a conflict.

Here is the fiddle to see the final version: http://jsfiddle.net/5t6wr/4/