前端优化 —— CheckBox 复选框点击过快导致选中旁边文字问题

原谅我文字表达水平有限，我想表达的是…看图

就是这个 ↓↓↓

感觉挺恶心的…于是解决方法就来了，操刀 CSS

.disabled-click-text {
    -moz-user-select: none; /* FireFox */
    -webkit-user-select: none; /* Webkit */
    -ms-user-select: none; /* IE10+ */
    -khtml-user-select: none; /* 奇葩浏览器 */
    user-select: none; /* 文本不允许被选择 */
}

然后在前端 HTML 中，例如我图中的位置

<div class="form-group">
    <!-- 加在下面的 div 里 -->
    <div class="col-xs-7 col-sm-8 disabled-click-text">
        <label class="css-input switch switch-sm switch-success">
            <input type="checkbox" id="register-terms" name="register-terms"> <span></span>我同意服务条款</label>
    </div>
    <div class="col-xs-5 col-sm-4">
        <div class="font-s13 text-right push-5-t"> <a href="#" data-toggle="modal" data-target="#modal-terms">查看条款</a>
        </div>
    </div>
</div>

然后就完美了，强迫症解除：

PS：在移动端中，禁止图片长按保存/访问只需要添加 pointer-events: none; 即可。