javascript - 如何获取焦点上单击元素的数据属性

Question

正如标题所说，我想知道是否有办法获取焦点事件期间被单击元素的数据属性。

当用户在搜索输入中键入内容时，我的页面会在侧面的一个小 div 中生成搜索结果。问题是，当焦点从输入中丢失时，我希望搜索结果消失。我编写了以下代码来完成此任务。

$('#chat-search').focusout(function(){
    $('#chat-search').val(""); //Search input is cleared
    $('.search-results').hide(); //The search results div is hidden
    $('.people').show(); // Shows the previous div that was taken up by the search results
});

问题是，我需要从搜索结果类中包含的单击的 div 中获取信息。包含数据的 div 具有 search-person 类，并且在 search-results div 中有很多这样的类。

$('body').on('click', '.search-person', function(){
    var userId = $(this).attr("data-id");
    console.log(userId);
    $('#chat-search').addClass('center-text');
    $('#chat-search').val("");
    $('.search-results').hide();
    $('.people').show();
});

搜索人单击功能不会触发，因为 focusout 事件隐藏了被单击的元素。 Focusout 似乎总是在单击事件之前触发。

我尝试触发正常的单击事件，以便当用户单击搜索结果或输入之外的任何内容时，将执行与上述方法中相同的代码。不过，此解决方法并不完美，因为如果搜索输入因用户按下选项卡而失去焦点，则它不会触发。

$('body').on('click', function(e){
    if ($(e.target).is($('#chat-search'))){ // If the search input is selected
        $('#chat-search').removeClass('center-text');
        $('.search-results').val("");
        $('.people').hide();
        $('search-results').show();
    }
    else if (!($(e.target).is($('.search-person')))){ 
        // If the selected element is neither the search input nor the search result
        $('#chat-search').addClass('center-text');
        $('#chat-search').val("");
        $('.search-results').hide();
        $('.people').show();
    }
});

当输入失去焦点时元素将被隐藏时，有什么方法可以找出焦点上单击的元素的数据属性吗？

HTML 看起来像这样

<div class="search-container">
    <input id="chat-search" class="chat-search center-text" placeholder="Search Users">
</div>
<div class="user-container scrollbar">
    <ul class="people">
    </ul>
    <ul class="search-results">
    </ul>
</div>

在搜索结果 ul 中，包含此 HTML 的结果是通过 ajax 请求生成的。

<li class="search-person" data-id="someId">
    <div class="search-left">
        <img class="search-image" src="someurl">
    </div>
    <div class="search-right">
        <div class="search-name">
            Text here
        </div>
    </div>
</li>

Answer 1

我设法通过为 focusout 事件设置超时来解决该问题，以便在搜索结果消失之前触发 click 事件。如果将来有人遇到这个问题，我是这样解决的。

$('#chat-search').focusout(function(){
    setTimeout(function(){
        console.log("focus out!");
        $('#chat-search').addClass('center-text');
        $('#chat-search').val("");
        $('.search-results').hide();
        $('.people').show();
    }, 300)
});