JavaScript(JQuery): Cancelling a selection in select control in FireFox

Question

在我的应用程序中，我有一个列表 <select>控制。仅在用户确认后才能更改每个控件中的选择。所以我的处理方式如下:

<select onchange="changeSelect(this)" onmousedown="clickSelect(this)">
    <option value="1" selected="true">A</option> // here is 'default' value 1
    <option value="2" >B</option>
</select>

<select onchange="changeSelect(this)" onmousedown="clickSelect(this)">
    <option value="1" >A</option>
    <option value="2" selected="true">B</option> // here is 'default' value 2
</select>

// more select controls with arbitrary 'default' values, they can be added and removed dynamically

当用户单击选择以选择另一个选项时，clickSelect(this)方法保存当前选择的(旧的)选择:

function clickSelect(select) {
    globalScope.previouslySelected = $(select).val();
}

现在，如果用户确实尝试更改选择，我会要求用户确认，如果她不确认，我会使用保存的值恢复之前的状态:

function changeSelect(select) {
    var response = confirm("Current changes to the threat log will be lost. Continue anyway?");
        if (response == false) {
            // change it back
            $(select).val(globalScope.previouslySelected);
            return;
        }
    }
}

现在，在 IE、Chrome 和 Opera 上它运行得很好。但是，当我使用 Firefox 时，它不起作用。原因是FF调用onmousedown在选择过程中处理程序两次 - 第一次是当用户单击向下滚动选择控件时，第二次是当她选择新的选择时。因此最后记住的值是 globalScope.previouslySelected将成为新的选定值，而不是像其他浏览器中那样真正的旧值。

我知道使用全局变量被认为是不好的做法。这不是这里的问题。使用任何其他存储都不会使其工作。

我现在唯一的想法是在 clickSelect(select) 中编写一段 Firefox 特定的代码。处理程序并忽略第二个通知。但是，由于某种原因，我在堆栈溢出上发现的以下代码不起作用:

if($.browser.mozilla) {
     console.log("Olalala");
}

例如，在 Chrome 中它会抛出以下异常:

Uncaught TypeError: Cannot read property 'mozilla' of undefined

那么我怎样才能让它工作，以便 ti 只能在 FF 中运行？或者如果你们有更好的解决方案来解决确认问题，我很乐意听到。请记住，有一组动态的选择控件，而不仅仅是一个。它必须对所有人都有效。另外，它们可以动态添加或删除，因此在单个页面请求中它们的数量可能会有所不同。用户使用单个选择控件加载页面，按“+”按钮并添加另一个选择控件等，但解决方案必须与所有控件统一工作。

Answer 1

您使用 onmousedown 监听器保存当前选择的选项是否有特定原因？您只需初始化全局变量以保存默认选项，并在做出新选择时更新它。

类似这样的事情:

HTML

<select id="mySelect" onchange="changeSelect(this)">
    <option value="1" >A</option>
    <option value="2" >B</option>
</select>

JS

var globalScope = {previouslySelected: $("#mySelect").val()};
function changeSelect(select) {
    var response = confirm("Current changes to the threat log will be lost. Continue anyway?");
    if (response == false) {
        // change it back
        $(select).val(globalScope.previouslySelected);
        return;
    }

    globalScope.previouslySelected = $(select).val();
}

编辑

我注意到在 Firefox 上，第二个 mousedown 事件的目标是选项，因此在这种情况下您可以使用以下代码忽略该事件:

$("select").mousedown(function(e) {
    if ($(e.target).is('option'))
        return;

    globalScope.previouslySelected = $(this).val();
});

使用此代码，您可以从 DOM 中删除 onmousedown 注册。