如何通过 mousedown 事件选中复选框？

Question

我有以下代码：

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

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

Answer 1

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"/>

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

您必须在 mousedown 之后绑定 click 事件，然后删除该事件。如果事件没有被删除，您的复选框将永远被选中。

Answer 2

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

Answer 3

请注意，浏览器已将这种行为默认内置于复选框中。如果你想查看某个复选框是否被选中，你可以简单地查看 DOM 元素的

checked

属性。例如：

const checkbox = document.getElementById('Mycheckbox');

// this onclick now purely for demonstration purposes
checkbox.addEventListener('click', function () {
    console.log(checkbox.checked);
});

<input type="checkbox" id="Mycheckbox"/>

Answer 4

正如中所解释的 在“mousedown”中使用 event.preventDefault() 是否会阻止 jquery 中的“click”或“mouseup”事件？ 一个可以

preventDefault

的

click

事件，该事件发生在

mousedown

之后

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

checkbox.addEventListener('click', e => e.preventDefault())

<input type="checkbox" id="checkbox"/>