当开发人员工具打开时，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 上不一致地失败。有些用户和某些情况下它不起作用，但在其他情况下它确实起作用。

我最终确实弄清楚了这个问题。请看我下面的回答。

Answer 1

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

1. 它在开发工具打开时工作而在开发工具关闭时不工作的根本原因与窗口大小有关。当窗口变得足够窄时，错误就会显现出来。

   • 由于我在所有浏览器中都将开发工具停靠在窗口的右侧，因此当我打开它们时，它们会将窗口缩小到足以使错误出现的程度。当我关闭开发工具时，窗口变得更宽，错误消失了。
   • 它在 iPad 上的 Safari 中不一致的原因是它取决于用户如何拿着 iPad。如果他或她以横向模式握住，那么屏幕会更宽，并且不会显示错误。如果他或她在纵向模式下拿着它，那么屏幕就会变得足够窄，可以看到虫子。

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