时间戳

首页 > 解决方案 > 如何使用 mousedown 事件检查复选框？

javascript - 如何使用 mousedown 事件检查复选框？

问题描述

我有以下代码：

checkbox.addEventListener('mousedown', function () {
    if (!this.checked) {
        this.checked = true;
    }
});

当鼠标按钮按下时，它应该打开复选框。它工作得很好，但是当我释放按钮时，复选框会重新关闭。我怎样才能解决这个问题？

标签： javascriptcheckbox

解决方案

checkbox.addEventListener('mousedown', function(){
    if(!this.checked) {
        var preventUnselect = function(){
            this.checked = true;            
            checkbox.removeEventListener('click', preventUnselect)
        };
        checkbox.addEventListener('click', preventUnselect)
        this.checked = true;
    }
});
<input type="checkbox" id="checkbox"/>

我很确定您的复选框未选中，因为复选框的默认行为是在单击后更改其状态。如果您在鼠标按下后选中复选框，则在单击事件完成后它的状态会切换（转回未选中）。只需单击复选框并将指针移到它之外，同时仍然按住鼠标左键 - 释放按钮时不会取消选中复选框..

您必须在鼠标按下后绑定单击事件，然后删除该事件。如果未删除事件，您的复选框将被永久选中。

推荐阅读