jQuery：如果将获得焦点的元素是特定类型，如何取消模糊事件？

Question

我正在编写一个自定义表单 UI，目前正在构建一个选择框替换。自定义选择控件基本上是一个 div，其中包含一个隐藏（屏幕外）选择输入，以及一个包含反映选择输入选项的锚元素的跨度：

<span class="input select">   
    <span id="select-select1" class="select-input"><span><span>This is the second option <a class="button" href="#"></a></span></span></span>    
    <span id="select-select1-options" class="select-options">
        <a value="1" href="#"><span>This is the first option</span></a>
        <a value="2" href="#"><span>This is the second option</span></a>
        <a value="3" href="#"><span>This is the third option</span></a>
    </span>    
    <select name="select1" id="select1" tabindex="2">
        <option value="1">This is the first option</option>
        <option value="2">This is the second option</option>
        <option selected="selected" value="3">This is the third option</option>
    </select>
</span>

当用户选择或点击该字段时，他们实际上将焦点放在隐藏的选择上；然后父跨度被突出显示（添加了一个 CSS 类），以便他们可以看到哪个字段具有焦点。

$('.input select').bind('focus', function() {

    $(this).closest('.input').addClass('focused');

}).bind('blur', function(e) {

    $(this).closest('.input').removeClass('focused');

});

然而，这就是正在发生的事情：

1. 用户单击自定义选择。跨度突出显示以表明它具有焦点，并出现选项锚点。
2. 用户单击一个选项，选项锚点再次隐藏。但是因为单击的选项是一个锚点，所以它会接收焦点并且主选择突出显示消失，此时它应该保留（因为我们仍然希望选择具有焦点）。

所以我想要实现的是，当单击自定义选择控件中的锚点之一时，它不会在隐藏的选择输入上触发模糊事件。

最好的方法是什么？

附：抱歉，如果这有点混乱，很难解释清楚！

Answer 1

我实际上正在构建一个自定义选择框替换，并且我发现所有当前的解决方案都缺乏。您可以尝试e.preventDefault() 看看这是否会取消模糊事件，但我的首选方法是在单击锚点时将焦点返回给选择，$(this).closest('input').focus();

另外，您是否有理由将焦点放在隐藏的选择上？您可以通过设置它的 tabindex 来让您的 span 捕捉焦点（并响应 Tab 键）：

$('.input').attr("tabindex", $('.input select').attr("tabindex") || "0");

然后通过完全隐藏来防止隐藏的输入捕获焦点：

$('.input select').hide();