Question

我已将大型应用程序中难以跟踪的错误隔离到以下最低工作示例：

<html>
<head>
    <title>Test page</title>
    <script type="text/javascript" language="JavaScript">
        function OnClickHandler (t) {
            t.disabled = true;
            var n = parseInt (t.getAttribute ("num"));
            document.body.appendChild (document.createTextNode (
                "num = " + t.getAttribute ("num") + ", checked = " + t.checked.toString () + " | "
            ));
            t.setAttribute ("num", n + 1);
            t.disabled = false;
        }
    </script>
</head>
<body>
    <input type="checkbox" num="0" onclick="OnClickHandler(this)" />
    <br />
</body>
</html>

我期待的是num属性的值与复选框的选中状态之间将完全同步。但是这种情况并不成立，可以通过非常快速地点击复选框来看到。以下是示例输出：

输入：两次非常快速的点击，短暂停顿，两次非常快速的点击，   短暂停顿，单击

num = 0，checked = true | num = 1，checked = true | num = 2，已检查   = false | num = 3，checked = false | num = 4，checked = true |

逻辑的意图是num属性仅在检查状态改变时改变。应用程序的许多后续逻辑取决于此同步。建议实现此同步的方法是什么？

提前感谢您的帮助。

Answer 1

好吧，我在发布问题后几乎立即发现了我的问题。我的错误很简单，但我想我还是会发布我的回复。

对于复选框，似乎正确的实现应使用onchange而不是onclick。所以，代码看起来应该是这样的：

测试页面 function OnClickHandler（t）{ t.disabled = true; var n = parseInt（t.getAttribute（“num”））; document.body.appendChild（document.createTextNode（ “num =”+ t.getAttribute（“num”）+“，checked =”+ t.checked.toString（）+“|” ））; t.setAttribute（“num”，n + 1）; t.disabled = false; }

希望这可以为一些可怜的灵魂留下一些白发。

Answer 2

您是否尝试过使用复选框而不是onclick？

onclick事件处理程序，用于显示不一致行为的复选框

2 个答案: