点击的按钮是span。为什么会响应input的click事件。

wgf4242
  • 90

点击的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>
回复
阅读 854
1 个回答

因为使用了label标签,使用label包裹着两个子元素 span\input。那么触发label的时候,相关联的click事件也会被触发。

详细可以去官网看看label的说明: https://developer.mozilla.org...

如果你把label换成div,click事件就无法触发了,可以试试。

宣传栏