javascript - 如何检查 jquery 中的 .blur() 是否单击了特定项目

Question

当用户开始在文本框中输入内容时，我会出现一个自动完成下拉列表(我正在使用jquery mobile，但我认为这对我的问题并不重要)。我希望能够在用户单击页面上的任意位置时隐藏整个下拉列表。但是，当用户实际单击下拉列表本身时，我不想隐藏下拉列表。

有没有办法捕获点击事件以便知道点击了什么？

这是我的模糊功能:

//hide autocomplete when dropdown is not clicked
$("#search-div input").blur(function () {
    $("#autocomplete-list").hide();
});

我正在考虑以某种方式在我的模糊函数中添加一个 if 语句。这是我的伪代码:

if( dropdown clicked)
{
    run code to take text from dropdown and place in textbox
}
else
{
    hide dropdown
}

是否可以知道在模糊功能中是否单击了我的下拉菜单或单击了其他内容？当我调试我的 javascript 时，我只看到与执行模糊() 的文本框相关的事件

编辑:

这是我在单击下拉菜单时用来处理的函数:

$( document).on( "click", "#autocomplete-list li", function() {
    var selectedItem = event.target.innerHTML;
    $(this).parent().parent().find('input').val(selectedItem);
    $('#autocomplete-list').hide();
    runSearchQuery();
});

Answer 1

您可以监听任何点击，而不仅仅是模糊，然后检查点击的元素是什么。 e.currentTarget 为您提供点击的内容。

var clickHandler = function(e) {
  if ($(e.currentTarget).hasClass('dropdown')) {
    // do nothing
  } else {

    // Make sure you unregister your event every
    // time the dropdown is hidden.
    $(window).off('click', clickHandler);
    // hide
  }
}

// When the dropdown comes down, register an event on the whole page.
$(window).on('click', clickHandler);