我正在尝试为我的应用程序准备一个自定义下拉控件。要求在这里。
主要流程: 如果我单击文本框,将打开一个 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');
});
最佳答案
您可以使用 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');
});
关于javascript - 仅在 Parent Div 上跟踪 onBlur 事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23865009/