打开开发人员工具时，不会触发 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 的方式。如果他或她在横向模式下拿着，那么屏幕会更宽，并且不会显示错误。如果他或她以纵向模式握住它，那么屏幕会变窄到足以让 bug 可见。

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