Haga un seguimiento del evento OnBlur en Parent Div solamente

Estoy tratando de preparar un control desplegable personalizado para mi aplicación. El requerimiento va aquí.

Flujo principal: si hago clic en el textbox, se abre un div y el usuario debe seleccionar un elemento del div. el artículo seleccionado necesita ser llenado en el textbox.

Flujo alternativo: si el usuario hace clic en el textbox y luego hace clic en algún lugar de la pantalla excepto en el menu desplegable Div, el menu desplegable debe cerrarse.

Puedo alcanzar el flujo principal fácilmente. No puedo script código para el flujo alternativo que he mencionado. Probé el evento de desenfoque simple, no funcionó.

Por favor, ayúdame a resolver el problema.

HTML

<input type="text" class="display-none food-textbox" id="txtFood" value="None"/> <div class="food-dropdown display-none"> <div class="food-item">Curled Spinach</div> <div class="food-item">Veg Mayo</div> <div class="food-item">French Toast</div> <input type="hidden" id="hdnFoodTargetTxt"/> </div> 

Código jQuery:

 $('.food-textbox').on('click', function () { var positionOfTb = $(this).offset(); var widthofTb = $(this).width(); $('.food-dropdown').removeClass('display-none').offset({ top: positionOfTb.top, left: positionOfTb.left }).css('width', widthofTb + 10); $('.food-dropdown').focus(); $('#hdnFoodTargetTxt').val($(this).attr('id')); }); $('.food-item').on('click', function () { var targetTxt = '#' + $('#hdnFoodTargetTxt').val(); $(targetTxt).val($(this).html()); $(targetTxt).next().eq(0).val($(this).html()); $('.food-dropdown').addClass('display-none'); }); 

Puede detener la propagación de stopPropagation mediante stopPropagation y agregar un controller de clics en el documento para cerrar el menu desplegable abierto.

Código:

 $('.food-textbox').on('click', function (e) { e.stopPropagation(); var positionOfTb = $(this).offset(); var widthofTb = $(this).width(); $('.food-dropdown').removeClass('display-none').offset({ top: positionOfTb.top, left: positionOfTb.left }).css('width', widthofTb + 10); $('.food-dropdown').focus(); $('#hdnFoodTargetTxt').val($(this).attr('id')); }); $('.food-item').on('click', function (e) { e.stopPropagation(); var targetTxt = '#' + $('#hdnFoodTargetTxt').val(); $(targetTxt).val($(this).html()); $(targetTxt).next().eq(0).val($(this).html()); $('.food-dropdown').addClass('display-none'); }); $(document).on('click', function () { $('.food-dropdown').addClass('display-none'); }); 

Demostración: http://jsfiddle.net/IrvinDominin/PKndL/