開發人員工具打開時，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和火狐一致的行爲。
• 此行爲與我在網上可以找到的所有其他相關問題完全相反。有很多情況下，開發工具打開時，JavaScript事件只有有效，但在開發工具關閉時停止工作。這些案件中的大多數似乎與寫入控制檯有關。
• 這個相同的代碼在iPad上的Safari上不一致。一些用戶和一些情況下，它沒有工作，但在其他情況下，它確實工作。

我終於弄清楚了這個問題。請參閱下面的答案。

Answer 1

有這個問題的兩個相互關聯的原因：

1. 爲它開發工具開放工作行爲的根本原因，而不是工作時開發工具都關閉是有關窗口大小。當窗戶足夠窄時，這個錯誤就表現出來了。

   • 由於我在所有瀏覽器中都將開發工具停靠在窗口的右側，所以當我打開它們時，它們縮小了足夠的窗口以使錯誤出現。當我關閉開發工具時，窗口變寬了，並且錯誤消失了。
   • 它在iPad上的Safari中不一致的原因是它依賴於用戶如何拿着iPad。如果他或她在橫向模式下進行操作，則屏幕會變寬，並且不會顯示錯誤。如果他或她以肖像模式持有它，則屏幕變得足夠窄以使該bug可見。

2. 代碼中的實際錯誤與使用Bootstrap有關。該按鈕是Bootstrap佈局的一部分。之前的開發人員實施了這個，意外地在<div class="col-xs-12">內嵌套了一個<div class="row">而不是其他方式。當我把列放在行內時，錯誤就消失了。