开发人员工具打开时，Javascript onclick不会触发 [英] Javascript onclick does not fire when developer tools are open

问题描述

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

 < button type =buttondata-bind =visible：！$ root.LocalEventId（），click：StartEvent.bind（$ data，'lunch'） 
 class =btn btn-success>< i class =fa fa-cutlery> 
< / i>去午餐< /按钮> 
  

• 在IE，Chrome和Firefox中，开发工具关闭但开启时无法工作的行为是一致的。 行为与我在网上可以找到的所有其他相关问题完全相反。有很多情况下，只有JavaScript事件 才能在开发工具打开时工作，但在开发工具关闭时停止工作。这些情况大部分似乎与写入控制台有关。


• 这个代码在iPad上的Safari上并不一致。一些用户和一些情况下，它没有工作，但在其他情况下，它确实工作。

我最终弄清楚了这个问题。请参阅下面的答案。

解决方案

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

1. 开发工具关闭时，使用开发工具打开工作而不工作的根本原因与开发工具关闭有关窗口大小。当窗口变得足够狭窄时，该错误就表现出来了。
   
   

   
   
   • 由于我的开发工具全部停靠在窗口的右侧浏览器，当我打开它们时，他们缩小了窗口，足以使错误出现。当我关闭开发工具时，窗口变宽，bug消失。
   
   
   • iPad在Safari上不一致的原因在于它依赖于用户如何握住ipad公司。如果他或她在横向模式下进行操作，则屏幕会变宽，并且不会显示错误。如果他或她以肖像模式持有它，则屏幕变得足够窄以使该错误可见。
   
   



2. 代码中的错误与使用Bootstrap有关。该按钮是Bootstrap布局的一部分。之前的开发人员在< div class =col-xs内意外地嵌套了< div class =row> -12> 而不是其他方式。当我将该列放入行内时，该错误消失了。

I recently ran into an issue where the onclick event of an HTML button was not firing when the developer tools in the browser were open, but it did fire when the tools were closed:

<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>

It was really baffling to me for several reasons:

• The behavior of working when the dev tools were closed but not working when they were open was consistent across IE, Chrome, and Firefox.
• This behavior is the exact opposite of all the other related questions I could find on the net. There are many cases where JavaScript event only works when the dev tools are open but stops working when the dev tools are closed. Most of those cases seemed to be related to writing to the console.
• This same code was failing inconsistently on Safari on the iPad. Some users and some cases it didn't work, but in others it did work.

I eventually did figure out the issue. Please see my answer below.

解决方案

There were two interrelated causes of this issue:

1. The fundamental reason for the behavior of it working with dev tools open and not working when dev tools were closes was related to window size. The bug manifested itself when the window got narrow enough.

   • Since I had the dev tools docked to the right side of the window in all my browsers, when I opened them they narrowed the window enough to make the bug appear. When I closed the dev tools the window got wider and the bug vanished.
   • The reason it was inconsistent in Safari on the iPad was that it depended upon how the user was holding the iPad. If he or she was holding in landscape mode then the screen was wider and the bug did not show. If he or she was holding it in portrait mode then the screen got narrow enough to make the bug visible.

2. The actual error in the code was related to use of Bootstrap. This button was part of a Bootstrap layout. The previous developer who implemented this had accidentally nested a <div class="row"> inside a <div class="col-xs-12"> instead of the other way around. When I put the column inside the row, the bug went away.

这篇关于开发人员工具打开时，Javascript onclick不会触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！