如何在focusout上获取单击元素的数据属性答案

【问题标题】：How to get data attributes of the clicked element on focusout如何在focusout上获取单击元素的数据属性
【发布时间】：2019-10-03 01:54:19
【问题描述】：

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

当用户输入搜索输入时，我的页面会在侧面的一个小 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
});

问题是，我需要从 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();
});

search-person click 函数不会触发，因为 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();
    }
});

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

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 中，通过 ajax 请求生成带有此 HTML 的结果。

<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>

【问题讨论】：

你也可以分享你正在尝试的 HTML 吗？
我也添加了相关的html
那么为什么不使用 $('.search-results').attr("data-id"); 呢？我的意思是它有点不清楚你到底想要达到什么目的
该属性属于具有 search-person 类的 li 元素。有很多 search-person 元素，所以我不能像那样直接获取属性。我必须知道点击了哪个元素。
尝试添加全局变量，如 window.previousClicked = 'button1Id'; （这将在单击按钮时设置，然后在聚焦时使用该变量

标签： javascript jquery

【解决方案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)
});

【讨论】：