模糊事件被觸發，而不是點擊

Question

當用戶開始在輸入字段中輸入內容時，我正在處理的Web應用程序會生成帶有自動填充選項的下拉列表，如果用戶單擊某個選項，它會填充相應的輸入字段與自動填充文本。

網絡應用程序包含許多發票行，每個發票行都有自己隱藏的自動填充下拉菜單，直到自動填充選項可用時纔會隱藏。

如果用戶點擊自動填充選項，我想使用此自動填充文本更新訂單。如果用戶沒有在自動填充選項上點擊並轉到下一個發票行，我仍然想用用戶輸入的純文本更新orderArray。

要做到這一點，我試圖用一個blur事件，無論是否被點擊下拉選項然而，這模糊事件觸發，我需要被觸發當且僅當來自其相應的下拉選項未被點擊。

我明白爲什麼blur事件總是被觸發，但是我通過分離兩個事件並正確更新順序來解決這個問題非常困難。

我欣賞任何建議。

非常感謝提前！

$(".dropdown").on(click, ".item-option", function(){     
    //set item object with dropdown option text 
    ... 
    ... 
    ... 

    updateOrder(true, item); 
    $('.dropdown').hide(); 

}); 
//if customer enters custom information without clicking on item option 
$('.id-input, .name-input, .price-input, .qty-input').blur(function(){ 

     updateOrder(false, {}); 
}); 


function updateOrder(clicked, item){ 
    if(clicked==true){ 
     //update order with the item information from the dropdown the user clicked 
    }else{ 
     //update order by collecting all plaintext user entered into input fields 
    } 
} 

Answer 1

好看一看這些變化，我在你的JS做了：我觀察到 ：
click事件的模糊後觸發。
而不是點擊使用 mousedown它會工作。

這裏有我在你的JS所做的更改：

Answer 2

請嘗試以下代碼。

$(".dropdown").on(click, ".item-option", function(event){     
    //set item object with dropdown option text 
    ... 
    ... 
    ... 
    updateOrder(true, item); 
    $('.dropdown').hide(); 
    event.stopPropagation(); 
}); 

//if customer enters custom information without clicking on item option 
$('.id-input, .name-input, .price-input, .qty-input').blur(function(){ 
    updateOrder(false, {}); 
}); 


function updateOrder(clicked, item){ 
    if(clicked==true){ 
    //update order with the item information from the dropdown the user clicked 
    } else{ 
    //update order by collecting all plaintext user entered into input fields 
    } 
} 

stopPropagation只需要在點擊事件，因爲一旦下拉選項點擊，模糊也觸發，我們需要停止。模糊不觸發點擊，所以停止傳播不需要那裏。