javascript - CSS - 如果元素用于事件函数，则无法在 css 中调用元素

Question

我有一个输入和一个复选框，如下所示:

html:

<input class="form-control input_box" id="passwordRegister" name="password" type="text">

<div class="aweCheckbox aweCheckbox-primary">
    <input id="showPasswordRegister" type="checkbox">
    <label class="labelShowPasswordRegister input_title" for="showPasswordRegister">
    ::before
    Show password
    ::after
    </label>
</div>

我可以这样设置标签的::before 样式:

CSS:

.aweCheckbox-primary input[type="checkbox"]:checked + label::before {
  background-color: #337ab7;
  border-color: #337ab7;
}   

一切正常。但是，如果我向元素添加一个 ('event') 函数

js:

function showPasswordRegister() {
    var x = document.getElementById("passwordRegister");
    if (x.type === "password") {
        x.type = "text";
    } else {
        x.type = "password";
    }
}   

$(".labelShowPasswordRegister").on('click',function(event){
    event.preventDefault();
    event.stopPropagation();
    showPasswordRegister();
});

...在控制台中我看到:

<div class="aweCheckbox aweCheckbox-primary">
    <input id="showPasswordRegister" type="checkbox">
    <label class="labelShowPasswordRegister input_title" for="showPasswordRegister"> [Event]
    ::before
    Show password
    ::after
    </label>
</div>  

...标签的样式不起作用。我错过了什么？

Answer 1

不要在处理函数中使用 event.preventDefault()。当您点击标签时，这会阻止触发点击相应复选框的默认操作。 CSS 与 :checked 伪类相匹配，但您执行此操作时并未选中该框。

如果您单击复选框本身而不是标签，CSS 应该仍然有效。