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

【问题标题】：Prevent select dropdown from opening in FireFox and Opera防止选择下拉菜单在 FireFox 和 Opera 中打开
【发布时间】：2012-07-21 03:40:18
【问题描述】：

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

这在 Chrome 和 MSIE 中运行良好，但在 FireFox 和 Opera 中无论如何都会显示下拉菜单。（未在 Safari 上测试）

示例：http://jsfiddle.net/9cmEh/

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

有谁知道如何在所有*浏览器中进行这项工作。

“全部”表示上述五种浏览器的最新版本。

【问题讨论】：

重复stackoverflow.com/questions/8870037/…
@Sheikh Heera 该链接是关于关于 keydown 的 FireFox 错误。与select 的键盘交互不涉及我的问题所在的下拉菜单。
event.preventDefault() 现在似乎可以在最新版本的 Firefox (25) 上运行
@lambinator。感谢您的通知。事实证明它现在也适用于 Opera。

标签： jquery html firefox opera html-select

【解决方案1】：

禁用未选择的元素（选项）。

$('select option:not(:selected)').attr("disabled",true);

【讨论】：

【解决方案2】：

这是一个已知错误：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;
}

【讨论】：

【解决方案3】：

这应该在大多数情况下都适用于点击和焦点（带有标签）：

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

【讨论】：

【解决方案4】：

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

FIDDLE

至少在 Firefox 中有效，但似乎在 Chrome 中无效？

编辑

我想不出一个合适的方法来检测一种方法是否有效，所以一些浏览器嗅探代替了。不是最好的方法，但我能想到的最好的方法，而且它似乎在我测试过的浏览器中工作：

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

【讨论】：

似乎也适用于 Opera。我可能可以同时使用这两种方法。
@Martijn 做了一些测试并提出了上述建议，似乎可行，但检查用户代理并不是真正的好习惯。
据我了解，始终简单地执行这两种方法并没有什么坏处。 e.preventDefault() 在 FF/Opera 上什么都不做，blur/focus 在 Chrome/MSIE 上什么也不做。我会测试一下。不需要检查用户代理。
mousedown 事件发生在 focus 事件之前，因此阻止 mousedown 事件的默认值会使 focus 事件不触发，因此它不会起作用。摆弄它，它似乎是一种或另一种方式，因此浏览器嗅探以防止 preventDefault 在除 webkit 和 IE 之外的其他浏览器上运行。

【解决方案5】：

你这个

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

来自这里 link ，This 可能对歌剧的情况有所帮助，这是一个略有不同的问题，但你可以让它工作

【讨论】：