layui switch 无法直接绑定 click 事件，须用 form.on('switch(filtername)', callback) 监听；切换前弹确认框需手动干预状态，通过 layer.confirm 控制并同步 dom、layui 内部状态与 ui 视觉，配合节流和禁用样式防重复触发。
layui switch 绑定 click 事件无效？别直接绑 click
Layui 的 switch 是通过 layui.form.render() 动态生成的伪元素，原生 click 事件监听不到真实点击动作。你写的 $('#mySwitch').on('click', ...) 几乎一定不触发。
- 必须用 layui 的表单模块事件监听：
form.on('switch(filterName)', callback) -
filterName要和 HTML 中lay-filter="xxx"的值严格一致 - 回调函数里通过
elem.checked判断当前开关状态（注意是 DOM 属性，不是 jQuery 的 prop）
<input type="checkbox" name="status" lay-skin="switch" lay-text="ON|OFF" lay-filter="statusSwitch">
对应 JS：
form.on('switch(statusSwitch)', function(data){
console.log(data.elem); // DOM 对象
console.log(data.value); // 开关的 value 值（默认是 on）
console.log(data.elem.checked); // true/false，当前是否开启
});
<h3>怎么在 switch 切换前弹确认框？用 event.preventDefault() 拦不住</h3><p>Layui 的 switch 事件是「切换完成之后」才触发的，没法像表单 submit 那样用 <code>event.preventDefault()</code> 中断。想实现“点击后先问用户，再决定是否真的切换”，得手动干预状态。</p>
- 先在 HTML 中给 switch 加
data-initial="true"或类似标记，记录初始状态 - 在
form.on('switch(...)')回调里，立刻调用layer.confirm() - 确认后，用
$(data.elem).prop('checked', !data.elem.checked)反向还原状态，再手动触发一次切换逻辑（或直接发请求 + 更新 UI） - 如果取消，就用
$(data.elem).prop('checked', data.elem.checked)强制回滚（因为 layui 已经改了 DOM）
关键点：不要依赖事件本身阻止行为，要靠“视觉还原 + 后续控制”来模拟拦截。
layer.confirm 弹窗里操作 switch DOM 容易错乱？注意渲染时机
常见错误是：在 layer.confirm 的 yes 回调里直接改 data.elem.checked，但没同步更新 layui 的内部状态，导致再次点击时逻辑错位。
- layui 用
form.render()管理表单状态，单纯改 DOM checked 不会刷新它的缓存 - 正确做法：用
$(data.elem).prop('checked', true/false)改状态，再调form.render('checkbox')（注意是checkbox，不是switch） - 更稳妥的是绕过 DOM 操作，直接用
form.val('formFilter', {status: '1'})更新表单值（前提是你的 switch 在一个form里且有lay-filter）
否则会出现：界面上开关已关，但下一次点击却触发“开”的回调——因为 layui 还以为它是开着的。
移动端点击穿透、连点触发多次？加防抖和禁用样式
switch 在 iOS 或某些安卓 WebView 下容易被快速点击两次，导致 confirm 弹两遍，或者状态翻转两次。
- 在
form.on('switch(...)')开头加个节流标记：if (isConfirming) return; - 弹窗前设
isConfirming = true，confirm 的 yes/no 回调末尾设isConfirming = false - 同时给开关加临时禁用样式：
$(data.elem).closest('.layui-form-switch').addClass('layui-disabled');，弹窗关闭后再移除
不然用户手快点两下，可能发两次请求，数据库状态就对不上了。
Layui switch 的二次确认本质不是“拦截事件”，而是“接管状态流转”。所有操作都要围绕 DOM 状态、layui 内部状态、UI 视觉三者同步来设计，漏掉任意一环都会出现看似随机的错位。
