onblur和链接元素在Chrome中无法正常工作 - 在IE 10中罚款

Question

我试图实现以下目标。点击一个链接，显示菜单。一旦该菜单失去焦点，清除菜单（同样当菜单项被点击时，删除菜单）。

这里是我的简单化代码：

<a id="owner" href="javascript: doThis();" onblur="remove();">ClickOnMe</a> 

    function doThis() { console.log('clickedOnItem'); } 

    function remove() { console.log('removed'); } 

我似乎无法得到这个工作。它在IE10中工作正常，但我无法在Chrome中工作。

小提琴我：http://jsfiddle.net/5t6wr/5/

Answer 1

出于某种原因，浏览器无法注册您的关注项目的链接。我们必须做的是强制链接集中，以便铬可以识别它。

更改您的链接如下：

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

我们添加焦点所有者，然后用功能弹出菜单进行。

您doThis功能里面你将要添加以下内容：

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

这是要采取目前的活性元素 - 和丢失焦点时，运行脚本关闭该窗口。

注意：您应该将您的删除功能放在超时，因为您将从菜单中加载某些内容，并且不希望同时触发两者，否则会导致冲突。

这里是一个小提琴看到最终版本： http://jsfiddle.net/5t6wr/4/