javascript - 使用来自 JavaScript Controller 的复选框

Question

我正在创建基于 ajax 的应用程序。现在我正在使用客户端 javascript。我创建了根据应用程序逻辑正常工作的 Controller ，但我在更新包含复选框的 View 时遇到问题。这是我正在做的事情的简短示例:

<script type='text/javascript'>
    var model = { 'chk1': true, 'chk2': false, 'chk3': false };
    var Controller = {
        'processCheck': function(chk, value) {
            model[chk] = value;
            if (chk == 'chk2')
                model.chk2 = true;
            if (chk == 'chk3' && value)
                model.chk1 = false;
            if (chk == 'chk1' && model.chk3)
                model.chk1 = false;
            Controller.updateView();
        },
        'updateView': function() {
            $('#chk1').attr('checked', model.chk1);
            $('#chk2').attr('checked', model.chk2);
            $('#chk3').attr('checked', model.chk3);
        }
    }
</script>
<input id='chk1' type="checkbox" onclick="Controller.processCheck('chk1', $('#chk1').attr('checked')); return false;" />
<input id='chk2' type="checkbox" onclick="Controller.processCheck('chk2', $('#chk2').attr('checked')); return false;" />
<input id='chk3' type="checkbox" onclick="Controller.processCheck('chk3', $('#chk3').attr('checked')); return false;" />

所以逻辑非常简单。单击复选框时会出现问题。它们更新不正确。但是如果我用适当的参数调用 Controller 方法，然后检查模型，一切似乎都是正确的。所以问题在于复选框中的单击事件。我对输入字段和下拉菜单没有任何问题。

Answer 1

checkbox(和radio)上的click 事件很奇怪而且令人困惑。

原则上，它发生在鼠标交互点，在单击导致复选框更改其状态之前。因此，应该可以通过 return false 或 event.preventDefault 来取消进行状态更改的默认操作。在这种情况下，决不应该触及复选框的状态。

然而，这并不是大多数浏览器中实际发生的情况。出于可追溯到古代 Netscape 的一些历史怪癖，click 事件处理程序中复选框的 checked 属性实际上是新值。单击事件本身已经导致复选框改变状态。然后，如果您阻止默认操作(return false)，浏览器会说“哎呀，抱歉，该更改毕竟从未发生过”并且主动将复选框翻转回其旧值.

这意味着，如果您碰巧故意从点击处理程序中的脚本设置复选框的状态，该值将会丢失，并被浏览器奇怪的尝试将时钟拨回原始点击更改时覆盖。

因此，与直觉相反，未能返回 false 并阻止默认操作实际上会减少浏览器的干扰!另一个修复是:

setTimeout(Controller.updateView, 0);

而不是直接在点击处理程序中调用 updateView。这让浏览器有机会在您从模型覆盖它之前翻转它的状态。您甚至可以将除 return false 之外的整个事件处理程序置于 0 超时。

理论上正确的解决方案是使用 onchange 而不是 onclick。此事件明确发生在状态更改之后，因此您完全不必担心这种怪异现象及其浏览器兼容性。 onchange 的问题是 IE 没有像它应该的那样快地触发它；它在触发之前等待焦点移出复选框，就像在文本输入上一样。因此，至少在该浏览器上，为了保持一致性，您需要 0-timeout-on-click。