如何调试jquery-3.4.1.min.js逻辑，排查点击后复选框自动选中问题

1. 加DOM属性变更断点直接拦截状态修改操作 #

这是定位属性被未知逻辑修改的最高效方案：

• 打开Chrome DevTools的「Elements」面板，定位到目标复选框的DOM节点
• 右键节点依次选择 Break on → attribute modifications
• 复现点击操作，只要复选框的checked属性被修改，调试器会直接在修改代码行断住，此时查看调用栈即可直接定位到修改状态的具体逻辑，不受jQuery压缩包、第三方匿名函数的影响

2. 替换压缩版jQuery为未压缩版本查看完整执行流程 #

你当前用的jquery-3.4.1.min.js是压缩混淆版本，所以单步时看不到具体执行的代码行，v.handle是混淆后的方法别名，对应原生jQuery的事件处理方法：

• 把页面引入的jQuery替换为同版本的未压缩版jquery-3.4.1.js，再复现操作
• 步骤3的4次step over操作会显示完整的jQuery事件分发源码，可清晰看到是否有委托绑定的冒泡事件、自定义事件在这个阶段被触发
• 也可以在控制台执行$._data(你的复选框DOM节点, "events")，输出所有绑定在该节点上的事件监听（包括委托绑定的隐藏事件），排查是否有未被你感知的click/change事件处理程序

3. 排查事件冒泡和组件内置逻辑 #

你在调用栈看到的dispatch是jQuery的事件分发核心逻辑，大概率是点击事件冒泡触发了你没注意到的父级监听：

• 可以先在你的自定义点击事件处理程序末尾加event.stopImmediatePropagation()临时阻断所有后续事件执行，如果此时复选框不再被自动选中，即可确认是后续触发的其他事件处理程序修改了状态
• 检查你使用的accordion组件的配置项和源码，大部分UI库的accordion组件默认会绑定「点击头部同步内置表单控件状态」的交互逻辑，这类内置逻辑的执行顺序晚于用户自定义绑定的事件，刚好会在你的处理程序执行完成后触发，同步复选框为选中状态

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