onblur和链接元素在Chrome中无法正常工作 - 在IE 10中很好 [英] onblur and link elements not working properly in Chrome - Fine in IE 10

问题描述

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

这是我沉闷的代码：

 < a id =ownerhref =javascript：doThis（）;的onblur = 删除（）; > ClickOnMe< / A> 
 
函数doThis（）{console.log（'clickedOnItem'）; } 
 
函数remove（）{console.log（'removed'）; } 
  

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

捣鼓我： http://jsfiddle.net/5t6wr/5/

解决方案

由于某些原因，Chrome浏览器未将您的链接注册为重点项目。我们所要做的就是强制链接专注，以便Chrome能够识别它。

将链接更改为以下内容：

 < a id =ownerhref =javascript：document.getElementById（'owner'）。focus（）; doThis（）; > ClickOnMe< / A> 
  

我们将焦点添加到所有者，然后继续使用您的函数调出菜单。

在你的doThis函数中，你会添加以下内容：

 文档。 activeElement.onblur = function（）{remove（）; }; 
  

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

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

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

I'm trying to achieve the following. Click on a link, display menu. As soon as that menu loses focus, clear the menu (also when menu item is clicked, remove the menu).

Here is my dumbed down code:

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

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

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

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

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

解决方案

For some reason chrome isn't registering your link as a focused item. What we have to do is force the link to be focused so chrome recognizes it.

Change your link to the following:

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

We added the focus to owner, then proceeded with your function to bring up the menu.

Inside your doThis function you will want to add the following:

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

That is going to take the current Active Element - and when focus is lost, run your script to close the window.

Note: You should put your remove function on a timeout, as you will be loading something from the menu, and don't want to have both trigger at the same time, it will cause a conflict.

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

这篇关于onblur和链接元素在Chrome中无法正常工作 - 在IE 10中很好的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！