防止在FireFox和Opera中打开选择下拉菜单

Question

在jQuery中，您可以通过在mousedown处理程序中使用event.preventDefault来阻止<select>打开其下拉菜单。这样，您可以在仍保留表单元素的原始样式的同时，将下拉菜单替换为其他内容。

这在Chrome和MSIE中运行良好，但在FireFox和Opera中，下拉菜单仍会出现。(未在Safari上测试)

示例：http://jsfiddle.net/9cmEh/ 选择元素应该看起来已启用，并且仍然响应所有用户交互，就像启用一样，但不应呈现下拉菜单。相反，下拉菜单将被替换为自定义呈现的内容，例如包括颜色样本、图标或字体，但是“自定义下拉菜单”部分已经在我的项目中完成。

有人知道如何使这在所有*浏览器中都能正常工作吗？

*“所有”指的是提到的五个浏览器的最新版本。

- Martijn

---

重复的问题：https://dev59.com/Pmox5IYBdhLWcg3w8I1J - The Alpha

@Sheikh Heera，那个链接是关于Firefox中keydown的一个bug。与select的键盘交互不涉及下拉菜单，而我的问题正是关于这个。 - Martijn

event.preventDefault()现在似乎在最新版本的Firefox（25）上可以使用了。 - lambinator

@lambinator。谢谢提醒。结果证明它现在也适用于Opera。 - Martijn

Answer 1

$(function() {
    $('select').on('focus', function(e) {
        this.blur();
        window.focus();
    });
});

这里是FIDDLE。

在火狐浏览器中可以工作，但在Chrome中似乎不起作用？

编辑

我想不出一种适当的方法来检测一个方法是否可行，所以进行了一些浏览器嗅探。虽然这不是最好的方法，但这是我能想到的最好的方法，并且它确实在我测试过的浏览器中运行：

$(function() {
    $('select').on('focus mousedown', function(e) {
        if ($.browser.webkit||$.browser.msie) {
            e.preventDefault();
        }else{
            this.blur();
            window.focus();
        }
    });
});​

- adeneo

---

似乎对Opera也有效。我可能可以使用两种方法。 - Martijn

@Martijn 进行了一些测试并得出了上述结果，似乎可以工作，但检查用户代理并不被认为是良好的实践。 - adeneo

据我理解，始终采用两种方法都不会有任何影响。在 Firefox/Opera 上，e.preventDefault() 不起作用；而在 Chrome/MSIE 上，blur/focus 也不起作用。我会测试一下。不需要检查用户代理。 - Martijn

鼠标按下事件发生在焦点事件之前，因此在mousedown事件上阻止默认行为将使焦点事件无法触发，从而导致其无法工作。对此进行了一些尝试，似乎只能采用其中一种方式，因此需要浏览器嗅探来防止preventDefault在非webkit和IE浏览器上运行。 - adeneo

Answer 2

试一下这个

               //e.stopPropagation works only in Firefox.
                  if (event.stopPropagation) {
                event.stopPropagation();
                event.preventDefault();
                 }

来自这里 链接，这个 可能有助于解决Opera的问题，它是一个略有不同的问题，但你可能可以让它正常工作。

- Scott Selby

Answer 3

这个代码应该在大多数情况下都能正常工作，无论是点击还是聚焦（使用Tab键）：

$('select').on('focus mousedown', function(e){
    e.stopPropagation();
    e.preventDefault();
    this.blur();
    window.focus();
});

- Seb33300

Answer 4

这是一个已知的错误: https://bugzilla.mozilla.org/show_bug.cgi?id=392863
它目前存在于Firefox ESR32中。

如果像我一样，在您的自定义HTML/Javascript选择器下有一个隐藏的<select>，并且仍然希望在该隐藏的<select>上保持焦点（为了可访问性、标签导航、箭头、输入等）。

只需使用z-index: -1即可。

.hidden-select {
  position: absolute;
  opacity: 0;
  filter: alpha(opacity=0);
  z-index: -1;
}

- clenemt

Answer 5

禁用未选中的元素（选项）。 $('select option:not(:selected)').attr("disabled",true);

- stalin wesley