仅在父 Div 上跟踪 onBlur 事件

Question

我正在尝试为我的应用程序准备一个自定义下拉控件。需求在这里。

主要流程： 如果我单击文本框，则会打开一个 div，用户需要从 div 中选择一个项目。所选项目需要填充到文本框中。

备用流程：如果用户单击文本框，然后单击屏幕上除下拉 div 之外的某个位置，则下拉 div 应该关闭。

我能够轻松实现主要流程。我无法为我提到的备用流程编写代码。我尝试了简单的模糊事件，它没有工作。

请帮我解决问题。

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>

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');
});

Answer 1

您可以使用stopPropagation 停止点击传播，并在文档上添加点击处理程序以关闭打开的下拉菜单。

代码：

$('.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');
});

演示：http://jsfiddle.net/IrvinDominin/PKndL/