javascript - 断点不适用于 Button 或 div 元素，但适用于 li 元素

Question

我是 JS 新手，正在尝试理解项目 https://github.com/tastejs/todomvc 的代码

请参阅屏幕截图，我尝试对 button X 以及其父元素 div 设置断点，但在这两种情况下，当我单击 X 按钮时，执行都不会停止。 (在断点下尝试了所有 3 个选项)

只有当我在元素 li 处设置断点时它才起作用；选择选项节点删除。

请解释一下我在这里犯了什么错误？

Answer 1

好吧，当您单击 <button> 时断点不起作用的原因或<div>包含该按钮是因为单击按钮后 DOM 没有发生变化(除了 on node removal 之外，唯一的断点选项位于 subtree modifications 或 attribute modifications 上)。

原因on node removal适用于<li>是因为(据我对您正在使用的项目的了解)，当单击按钮时，您会启动一段 JS 代码来删除所述元素( <li> )。

不过，如果您想要一种在单击按钮时实际添加断点的方法，我建议使用此方法:

• 在 Chrome 开发工具中
• 前往来源
• 查看窗口的下半部分并找到事件监听器断点
• 查找并展开DOM Mutation
• 启用DOMFocusIn
• 点击您的按钮

警告:只要元素获得焦点(不仅仅是单击按钮)，这就会导致断点出现，并且您可能知道 DOM 中的某些元素可以获得 focus .

希望这有帮助。