input[type=radio]和input[type=checkbox]绑定click事件时使用event.preventDefault方法存在的问题

@zhirui1994 2019-01-25 10:02:47发表于 zhirui1994/zhirui1994.github.io HTMLJavaScript

现象

    <form>
        <label><input onclick="handleRadioClick(event)" type="radio"/>单选框</label>
        <label><input onclick="handleCheckboxClick(event)" type="checkbox"/>多选框</label>
    </form>
    <script>
        function handleRadioClick(e) {
            e.preventDefault();
            e.stopPropagation();
            e.target.checked = !e.target.checked;
        }

        function handleCheckboxClick(e) {
            e.preventDefault();
            e.stopPropagation();
            e.target.checked = !e.target.checked;
        }
    </script>

如上代码当click事件响应后本来cheked为true,但是函数执行完后,单选框和多选框不管如何都时未选中状态。

参考