极客观点
项目管理
HarmonyOS
点击的slider应该是span吧。为什么会响应input的click事件。
用devtools看了确实是span, 也没有事件。为什么会响应到input的事件呢。
https://codepen.io/wgf4242/pe...
<body>
<div id="container">
<h1>Light / Dark Mode Toggle</h1>
<label class="switch">
<input type="checkbox" onclick="changeMode()">
<span class="slider"></span>
</label>
</div>
</body>
<script>
function changeMode() {
var element = document.body;
element.classList.toggle("dark-mode");
}
</script>
<style>
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.switch input{
display: none;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
border-radius: 34px;
transition: .4s;
}
.slider::before{
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: #fff;
border-radius: 50%;
transition: .4s;
}
input:checked + .slider {
background-color: #b892ff;
}
input:checked + .slider::before {
transform: translateX(26px);
}
.dark-mode {
background-color: #0b0a14;
}
</style>
因为使用了
label标签，使用label包裹着两个子元素 span\input。那么触发label的时候，相关联的click事件也会被触发。详细可以去官网看看label的说明： https://developer.mozilla.org...
如果你把label换成div，click事件就无法触发了，可以试试。