onblur事件觸發的onclick

Question

如上所述，我有一個按鈕，單擊該按鈕時，將打開子菜單。對於子菜單中的每個選項，都有三個元素（實際上我認爲更多，但爲了簡單起見將保留爲3）。我將焦點放在子菜單的主div（白色「框架」）上。這個div的onblur - 我然後隱藏子菜單。

這一切都像預期的那樣行事 - 但我有一個探測器，當某個特定選項的3個元素之一被點擊（即給定焦點）時，主div會關閉，因爲它是onblur事件處理程序 - 而PopUp函數鏈接到子菜單中選項的元素的onClick事件不會被觸發/到達。

我需要通過這種方式來處理主div的onblur事件，如果選項沒有被點擊。

我有JQuery明顯使用，所以我非常樂意與它一起解決問題。

Answer 1

我要發佈這個答案 - 希望有人能改善它或建議一種替代方案，因爲它確實感覺像是一種工作。

但是，我所做的是onblur事件 - 不是立即隱藏div，而是使用超時進行一個小的延遲，所以我不會改變onblur/onclick事件的優先級但實際上給了onclick'一個機會'開火。

Answer 2

你可以嘗試以下的想法： （未測試所以它需要一些調整/調試..）

function mouseOverSubMenu(mouseX, mouseY) { 
    var divTop = $('.sub_menu').offset().top; 
    var divLeft = $('.sub_menu').offset().left; 
    var divRight = divLeft + $('.sub_menu').width(); 
    var divBottom = divTop + $('.sub_menu').height(); 


    return (mouseX >= divLeft && 
      mouseX < divRight && 
       mouseY >= divTop && 
       mouseY < divBottom); 
} 


$('.sub_menu, .other_elements').hover(
    function(e) { 
     if (mouseOverStartButton(e.pageX, e.pageY)) { 
      // show menu 
     } 
    }, 
    function(e) { 
     if (!mouseOverStartButton(e.pageX, e.pageY)) { 
      //hide menu 
     } 
    } 
);