下拉選擇的blur和click事件衝突了

下拉選擇的blur和click事件衝突了

當寫個下拉選擇框時我們希望當input失去焦點時，下拉框消失，或者當選擇下拉框中的內容的同時將內容填入input並且使下拉框消失。

這時候我們會想到blur和click，單獨使用的時候是沒有問題的，但一旦放到一起就會發現你點擊了下拉選項中的li時，直接觸發了blur事件，而且對li的click事件之後的判斷是否是點擊li還是僅僅input失去焦點這個判斷執行失敗了

例如

$('#productName').blur(function(){
        var chooseProduct = 0;
        $('.product-list').on('click','li',function(){
            chooseProduct = 1;
            $('#productName').val($(this).text());
            productId = $(this).data('id');
            $('#productId').val(productId);
            $('.product-list').hide();
        });

        if(chooseProduct == 1){
            console.log('執行選擇產品操作');
        }else{
            console.log('僅僅是失去焦點操作，隱藏下拉');
            $('.product-list').hide();
        }
    });

這時候你會發現chooseProduct一直是爲0的

解決方法1：

$('#productName').blur(function(){
        var chooseProduct = 0;
        $('.product-list').on('click','li',function(){
            chooseProduct = 1;
            $('#productName').val($(this).text());
            productId = $(this).data('id');
            $('#productId').val(productId);
            $('.product-list').hide();
        });
        setTimeout(function(){
            if(chooseProduct == 1){
                console.log('執行了選擇操作');
            }else{
                console.log('僅僅失去焦點，隱藏下拉');
                $('.product-list').hide();
            }
        },200)
    });

但是畢竟setTimeout還是可以感覺到延遲的

因此更好的選擇是使用mousedown

方法2：

$('#productName').blur(function(){
        var chooseProduct = 0;
        if(chooseProduct == 1){
            console.log('chooseProduct=' + chooseProduct);
        }else{
            console.log('chooseProduct=' + chooseProduct);
            $('.product-list').hide();
        }
    });

$('.product-list').on('mousedown','li',function(){
            chooseProduct = 1;
            $('#productName').val($(this).text());
            productId = $(this).data('id');
            $('#productId').val(productId);
            $('.product-list').hide();
        });