4

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

这是我的愚蠢代码：

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

4

1 回答 1

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/

于 2013-05-13T19:37:03.230 回答