如何修复Leaflet checkbox点击时的“误选文本”问题？

这个问题我之前帮不少开发者踩过坑，咱们先唠唠为啥会出现这事儿，再给你几个随手就能用的解决办法：

• 没有正确关联复选框与文本：如果只是把文本随便放在Checkbox旁边，没用到<label>标签绑定，点击文本时浏览器识别不到这是在操作Checkbox，自然就触发了默认的文本选中行为。
• 浏览器默认行为误触发：哪怕用了<label>，如果点击时手滑轻微拖动了鼠标，或者点击速度过快，浏览器可能会误判你是要选中文本，而非切换Checkbox状态。
• 自定义样式的干扰：如果是用CSS伪元素模拟的Checkbox样式，可能没处理好点击区域的事件拦截，导致文本区域的选择事件没被阻止。

方案1：用<label>正确绑定（最基础有效） #

这是从根源上解决问题的办法，绑定后点击文本会直接触发Checkbox状态切换，浏览器也会默认避免文本选中：

<!-- 写法1：直接包裹Checkbox和文本 -->
<label>
  <input type="checkbox" id="leaflet-checkbox"> Leaflet
</label>

<!-- 写法2：通过for属性关联（适合Checkbox和文本分开布局的情况） -->
<input type="checkbox" id="leaflet-checkbox">
<label for="leaflet-checkbox">Leaflet</label>

方案2：CSS一键禁用文本选择 #

如果已经绑定了<label>但偶尔还是会出现误选，给Checkbox所在的容器加个CSS规则，彻底禁止文本选中：

/* 给包含Checkbox和文本的容器加这个类 */
.checkbox-group {
  user-select: none;
  -webkit-user-select: none; /* 兼容Chrome、Safari */
  -moz-user-select: none;    /* 兼容Firefox */
  -ms-user-select: none;     /* 兼容IE/Edge */
}

方案3：JS精准拦截事件 #

要是需要更精细的控制（比如只在点击时阻止选择），可以给<label>加个鼠标按下事件，提前拦截文本选择的默认行为：

const leafletLabel = document.querySelector('label[for="leaflet-checkbox"]');
leafletLabel.addEventListener('mousedown', function(e) {
  e.preventDefault(); // 阻止鼠标按下时的文本选择触发
});

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