如何阻止HTML label默认点击事件触发的滚动行为

当点击label包裹的文本区域时，浏览器会自动滚动到label/input的位置，但直接对label的click事件调用preventDefault()会连带阻断input的change事件，这里提供两种可行的解决方案：

方案一：给input设置tabindex="-1" #

浏览器触发滚动的核心原因是：点击label时会自动聚焦关联的input元素，页面会滚动到聚焦元素的位置。给input设置tabindex="-1"可以让它无法被自动聚焦，从根源上避免滚动，同时完全不影响change事件的触发。

修改后的完整代码：

<div style="height: 2000px">
  <label>
      <input checked type="radio" tabindex="-1" />
      <div>
        haha
      </div>
    </label>
</div>

const input = document.querySelector("input")
input.addEventListener("change", e => {
  e.target.checked = !e.target.checked
  console.log("change happen")
})

方案二：精准控制label的点击行为 #

如果需要保留input的聚焦能力，可以在label的click事件中判断点击目标：仅对非input区域的点击阻止默认行为，同时手动切换input状态并触发change事件，既避免滚动，又保证事件正常执行。

代码示例：

const label = document.querySelector("label")
const input = document.querySelector("input")

label.addEventListener("click", e => {
  // 只有点击的不是input本身时才处理
  if (e.target !== input) {
    e.preventDefault()
    // 手动切换勾选状态
    input.checked = !input.checked
    // 手动派发change事件
    input.dispatchEvent(new Event('change'))
  }
})

input.addEventListener("change", e => {
  console.log("change happen")
})

内容的提问来源于stack exchange，提问作者BugMaker