Question

我的应用程序中出现问题。当用户点击应该触发事件的div时，有时（约1/10）没有任何事情发生 - onclick事件未被触发，其他时候一切顺利。这很奇怪......

在简短的代码中，我可以复制该问题：

<html>

<head>
<style type="text/css">
  .links:hover{
    text-decoration: underline;
    cursor: pointer;
  }
</style>
</head>

<body>
  <span id="init_panel" style="visibility:visible; position:absolute; left:0px; top:0px;"></span>
  <script type="text/javascript">
  function init_match(){
    alert("in init_match()");
    //...
  }
  var flag=true;
  function loop(){
    if (flag){
        var div = document.getElementById("init_panel");
        var HTML = "<div class='links' onclick='init_match();'><font color='black'><b>new match!</b></font></div><br />";
        if (div.innerHTML!=HTML){
            div.innerHTML=HTML;
        }
        setTimeout(loop, 1000);
    }
    else{
        div.innerHTML="";
    }
  }
  loop();
  </script>
</body>

</html>

我需要用JavaScript更改一系列div的内容和相应的链接;这就是为什么我需要一个类似于那个的代码。我希望有人可以澄清如何在事件中避免这个问题，我非常感谢任何帮助！

编辑以添加以下信息：

我添加了以下js代码：

document.onclick = my_handler;
function my_handler() {
    alert("the document was clicked!");
}

结果是：与其他onclick失败的次数相同，此document.onclick也失败了。这很奇怪！我想更新div的内容，而不是他们的onclick事件失败......

可以看到这个bug的jsfiddle的最新版本是：
http://jsfiddle.net/grSDs/3/

成功＆amp;故障率为不同的浏览器改变，也可以根据脚本是否直接运行或者是否通过jsfiddle接口运行（不同情况下成功率从~90％到~0％）。

Answer 1

最后，经过多次尝试，我找到了解决方案：

我不得不更换一行：

var HTML = "<div class='links' onclick='init_match();'><font color='black'><b>new match!</b></font></div><br />";

由：

var HTML = "<div class=\"links\" onclick=\"init_match();\"><font color=\"black\"><b>new match!</b></font></div><br>";

因为当我插入第一行时，该div的innerHTML会自动更改为第二行。因此，当代码将我的HTML（第一个字符串）与自动生成的div.innerHTML（第二个字符串）进行比较时，程序正在刷新div.innerHTML，即使它应该是安静的，有时也会破坏链接。

代码的逻辑是正确的，并且该错误具有非常稳定的行为和非逻辑解决方案。

奇怪的是javascript将<br />更改为<br>（为什么？）并且它也会更改引号。

onclick函数有时不会激活它的事件

1 个答案: