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

Question

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

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

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

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

有谁知道如何在所有*浏览器中实现这一点。

• “全部”表示所提到的五个浏览器的最新版本。

Answer 1

$(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();
        }
    });
});​