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(); };

这将采用当前的活动元素 - 当焦点丢失时，运行脚本关闭窗口。

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

这是查看最终版本的小提琴： http://jsfiddle.net/5t6wr/4/

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

1 个答案: