为什么在 Chrome 和 FF 中调用函数 onclick 不是一直有效，但在 IE 中有效？答案

【问题标题】：Why does calling a function onclick not work all the time in Chrome and FF, but works in IE?为什么在 Chrome 和 FF 中调用函数 onclick 不是一直有效，但在 IE 中有效？
【发布时间】：2014-04-04 00:51:13
【问题描述】：

我有以下代码：

<HTML>

<HEAD>
      <SCRIPT>
function myFunction(atlasTrackingURL)
{
var atlasURL = atlasTrackingURL;
      if (!atlasURL) return;

            //Build a cache busting mechanism
            var timestamp = new Date();
            var queryString = "?random=" + Math.ceil(Math.random() * 999999999999) +
                          timestamp.getUTCHours() + timestamp.getUTCMinutes() +                            

timestamp.getUTCSeconds();
            //Build the final URL
            atlasURL = atlasURL + queryString;

if (!document.getElementsByTagName || !document.createElement
   || !document.appendChild)
                  {return false;}
            else
                  {     //Activate the JACTION call
                        var script = document.createElement("script");
                        script.type = "text/javascript";
                        script.src = atlasURL;
                        document.getElementsByTagName("head")[0].appendChild(script);
                    return true;
                  }
      }
      </SCRIPT>
</HEAD>

<BODY>

<a href="http://www.microsoft.com" onclick = "myFunction('http://view.atdmt.com/jaction/adoakb_PiggybackJSTest_1')">Test - Click Me</a>

</BODY>
</HTML>

它每次都可以在 Internet Explorer 中运行，但很少在 Chrome 和 Firefox 中运行。为什么会这样？

这些浏览器不能很好地处理onClick 函数吗？我还有其他选择吗？

我正试图帮助客户找出为什么他们的跟踪标签没有在这些浏览器中的点击时一直触发。

谢谢，

【问题讨论】：

检查开发工具并确保其他元素没有重叠
减少问题空间 - 这行得通吗：jsfiddle.net/2Qegs?如果是这样，那么除了浏览器之外还有其他事情发生。
该代码确实有效，但我仍然很困惑为什么它在 IE 中 100% 的时间都有效，而不是 Firefox 和 Chrome。我认为这可能是每个浏览器以某种方式解释代码的方式，但我什至不知道从哪里开始寻找。
你有一个竞争条件，在链接将你发送到另一个页面之前，你不能真正依赖脚本来加载。
我可以使用 setTimeout 函数来帮助解决这个问题吗？

标签： javascript html

【解决方案1】：

正如 Musa 指出的那样，您遇到了某种依赖于浏览器的竞争条件。

尝试最初隐藏链接，等待文档加载，然后添加 onclick 属性并使用 javascript 显示链接。

因此，例如，将链接 HTML 更改为：

<a id="microsoft-link" href="http://www.microsoft.com" style="display: none;">Test - Click Me</a>

并在 myFunction() 下方添加您的 javascript，如下所示：

 document.addEventListener('DOMContentLoaded', function(){
   var link_elem = document.getElementById("microsoft-link");
   link_elem.onclick = function() {
     myFunction('http://view.atdmt.com/jaction/adoakb_PiggybackJSTest_1'); 
   };
   link_elem.style.display = 'inherit';
 });

jsfiddle -- http://jsfiddle.net/m8VTy/3/

编辑：我意识到我可能误解了你想要做的事情。 myFunction() 究竟应该完成什么？

【讨论】：

它应该调用view.atdmt.com url，它是一个javascript文件。
我需要确保 javascript 文件在 href 之前执行
当我签入 Chrome devTools 时，它说 view.atdmt.com javascript 文件在使用此方法执行之前失败。你有什么其他的建议？主要问题是我同时使用href和onclick，并且在onclick可以完全执行之前href重定向，所以javascript文件在Chrome和FF中根本没有被调用。