HTML <select> 焦点问题：Firefox 需要单击 2 次才能选择 <option>答案

【问题标题】：HTML <select> focus issue: 2 clicks needed with Firefox to select an <option>HTML <select> 焦点问题：Firefox 需要单击 2 次才能选择 <option>
【发布时间】：2014-09-13 07:37:51
【问题描述】：

我正在开发一个具有大致以下结构的自定义 SELECT 组件（伪示例）。

<span>
  <select onclick=chooseAnOptionAndCloseSelect>
    <option>
      .
      .
    <option>
  </select>
  <input onclick=displaySelectAndOptions onchange=filterOptionsAccordingTheInput />
</span>

因此，单击 INPUT 会打开包含 OPTION 的自定义 SELECT 组件。
我正在根据输入字段的值使用 jQuery 过滤显示的选项。

在键入值时，焦点自然是在输入上。在过滤了一些选项后，我想单击其中一个。 问题是，Firefox 需要两次点击，首先显然再次关注选择元素（焦点在输入上）只有第二次点击才能获得所需的结果触发选择上的 onclick 事件（传递选项索引）。

在 IE 上可以正常工作，过滤值后单击即可选择。

我不能使用焦点重定向，因为我不想打扰用户。也就是说，只要用户喜欢，焦点就需要停留在输入上，这样他/她就可以根据自己的喜好过滤值。

是否可以巧妙地使用 JS/jQuery 侦听器或让单击表现得像双击一样？任何想法表示赞赏。

更新：
我在以下方法上取得了一些进展（鼠标嵌套在 onfocus 中）：

$(function() { // <- document.ready
    $('select[data-filtered=true]').on('focus', function(evt) { // <- onfocus
        $(this).mouseup(function(evt) { // <- Find out that it  was a mouse click
            // This is the problematic part.
            // I need to find out somehow which <option> to mark as selected
            $(this).children().get(X).selected = true; // <- children are the <options>
            $(this).click(); // <- trigger a normal onclick handler 
        });
    });
});

所以在onfocus事件期间鼠标悬停的<option>应该被标记为selected = true。有什么建议？提取鼠标坐标，然后可能是更多嵌套事件？

【问题讨论】：

您的标记看起来无效，因为<select onclick=chooseAnOptionAndCloseSelect> 需要双引号。你能也分享一下jsfiddle吗？
是的，看起来小提琴肯定会在这里加快速度
提醒：事件调用是伪的，所以我没有包含双引号。我会试试看能不能搞个jsfiddle。

标签： javascript jquery firefox focus html-select

【解决方案1】：

上次更新后我猜我已经很接近了：P，用下面的代码解决了。

$(function() {
    $('select[data-filtered=true]').on('focus', function(evt) {
        $(this).mouseup(function(evt) { 
            evt.target.selected = true;
            $(this).click();
        });
    });
});

这有效地执行了第二次鼠标点击，在我的情况下，用户需要这样做。

同时添加内联版本（由于 JSF 我需要使用）：

onfocus="$(this).mouseup(function(evt) {evt.target.selected = true;$(this).click();});"

【讨论】：