当开发人员工具打开时，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. 当dev工具关闭时，使用开发工具并且无法正常工作的行为的根本原因与窗口大小有关。当窗口变窄时，虫子就会出现。

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

2. 代码中的实际错误与Bootstrap的使用有关。此按钮是Bootstrap布局的一部分。之前实现此操作的开发人员意外地在<div class="row">内嵌套<div class="col-xs-12">而不是相反。当我把列放在行内时，bug就消失了。