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');

});

但是，这就是发生的事情：

用户点击自定义选择。突出显示跨度以显示其具有焦点，并显示选项锚点。
用户单击一个选项，再次隐藏选项锚点。但是因为点击的选项是一个锚点，然后它会获得焦点，主选择高亮显示消失，当它应该停留时（因为我们仍然希望选择具有焦点）。

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

最好的方法是什么？

P.S。对不起，如果这有点令人困惑，很难解释清楚！

Answer 1

我实际上正在建立一个自定义选择框替代品以及我找不到所有当前的解决方案。您可以尝试使用e.preventDefault()来查看是否取消了模糊事件，但我首选的方法是，如果点击了锚点，只需将焦点返回到选择，$(this).closest('input').focus();

另外，您是否有理由关注隐藏的选择？您可以通过设置tabindex：

来允许跨度捕获焦点（并响应Tab键）

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

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

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

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

1 个答案: