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/