使用原生开发时 checkbox 单击事件会触发两次

代码如下

<labelid="cd-checkbox1"class="t-checkbox cd-checkbox trans-ctx--transmart-crx-checkbox t-is-checked"><inputtype="checkbox"class="t-checkbox__former"value=""checked=""/><span class="t-checkbox__input"></span><span class="t-checkbox__label">通知</span></label
>

document.querySelector("#cd-checkbox1").addEventListener("click", async (event) => {event.stopPropagation()if (event.target.tagName === 'SPAN') returndocument.querySelector('#cd-checkbox1').classList.toggle("t-is-checked");if (document.querySelector('#cd-checkbox1 .t-checkbox__former').hasAttribute("checked")) {document.querySelector('#cd-checkbox1 .t-checkbox__former').removeAttribute("checked");} else {document.querySelector('#cd-checkbox1 .t-checkbox__former').setAttribute("checked", "");}
}, true);

解决的方法就是加 if (event.target.tagName === 'SPAN') return

因为触发两次分别是按钮和按钮文字触发的

event.target.tagName === 'SPAN'

event.target.tagName === 'INPUT'

去掉一个就可以了。