当开发者工具打开时，JavaScript的onclick事件无法触发。

Question

最近，我遇到了这样一个问题：当浏览器的开发人员工具打开时，HTML按钮的onclick事件没有触发，但是在关闭工具时会触发：

<button type="button" data-bind="visible: !$root.LocalEventId(), click: StartEvent.bind($data, 'lunch')" 
        class="btn btn-success"><i class="fa fa-cutlery">
</i> Going to Lunch</button>

对我来说，这件事情有几个令人困惑的地方：

• 在IE、Chrome和Firefox中，当开发工具关闭时可以正常工作，但当开发工具打开时无法工作。
• 这种行为与网络上找到的所有其他相关问题恰好相反。有许多情况下，JavaScript事件仅在开发工具打开时才起作用，而在关闭开发工具后停止工作。其中大多数情况似乎与写入控制台有关。
• 同样的代码在iPad上的Safari上不稳定。在某些用户和某些情况下它无法工作，但在其他情况下它可以工作。

最终我终于找到了问题所在，请参见下面的答案。

- Mark Meuer

Answer 1

这个问题有两个相互关联的原因：

1. 行为出现问题的根本原因与窗口大小有关。当窗口变得足够狭窄时，这个 bug 就会显现出来。由于在所有浏览器中我都将开发工具停靠在窗口右侧，所以当我打开它们时，它们会使窗口变窄，从而让这个 bug 出现。当我关闭开发工具时，窗口变宽了，bug 就消失了。在 iPad 上的 Safari 中表现不一致的原因是它取决于用户拿着 iPad 的方式。如果用户将其横向拿着，那么屏幕就会更宽，bug 就不会显示。如果用户将其纵向拿着，那么屏幕就会变得足够狭窄，从而让这个 bug 显示出来。

2. 代码中实际的错误与 Bootstrap 的使用有关。该按钮是 Bootstrap 布局的一部分。之前实现此功能的开发人员不小心将一个 `<div class="row">` 嵌套在一个 `<div class="col-xs-12">` 中，而不是反过来。当我将列放到行中时，bug 就消失了。

- Mark Meuer