显示不一致行为的复选框的Onclick事件处理程序

onclick event handler for checkbox exhibiting inconsistent behaviour

本文关键字：Onclick 事件处理 程序 复选框 显示 不一致      更新时间：2023-09-26

我已经将一个大型应用程序中难以跟踪的bug隔离为以下最小工作示例:

<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, checked= false | num = 3, checked = false | num = 4, checked = true |

逻辑的意图是num属性仅在检查状态更改时更改。应用程序的许多后续逻辑都依赖于这种同步。建议采用什么方法来实现这种同步?

您是否尝试过在复选框中使用onchange而不是onclick?

好吧，我发现我的问题后几乎立即张贴。我的错误很简单，但我还是想把我的回答贴出来。

似乎正确的实现应该使用onchange而不是onclick作为复选框。因此，代码应该看起来像这样:

测试页面OnClickHandler (t) {T.disabled = true;var n = parseInt (t.getAttribute ("num"));document.body.appendChild(文档。createTextNode ("num = " + t.getAttribute ("num") + "， checked = " + t.checked.toString () + " | "））;t.setAttribute ("num"， n + 1);T.disabled = false;}

希望这能为一些可怜的人省下几根白头发。

相关文章：