2

我的应用程序中出现问题。当用户单击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 事件上失败......

可以看到此错误的 jsfiddle 的最新版本位于：http:
//jsfiddle.net/grSDs/3/

不同浏览器的成功率和失败率会随着脚本直接运行或通过 jsfiddle 接口运行（不同情况下的成功率从 ~90% 到 ~0%）而变化。

4

1 回答 1

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>（为什么？）并且它也更改了引号。

于 2013-02-27T16:04:21.263 回答