javascript - 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

出于某种原因，chrome 没有将您的链接注册为焦点项目。我们要做的是强制链接聚焦，以便 chrome 识别它。

将您的链接更改为以下内容:

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

我们将焦点添加到所有者，然后继续执行您的功能以调出菜单。

在您的 doThis 函数中，您需要添加以下内容:

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

这将采用当前事件元素 - 当失去焦点时，运行您的脚本以关闭窗口。

注意:您应该将您的删除功能置于超时状态，因为您将从菜单中加载某些内容，并且不希望同时触发这两个功能，这会导致冲突。

这是一个 fiddle ，可以看到最终版本: http://jsfiddle.net/5t6wr/4/