JavaScriptが無限ループに入るイベント

マウスオーバー時にハイパーリンクを動的に作成し、mouseoutイベントでそれを削除する必要があります。しかし、マウスがリンクを越えると、私はそれをにする必要はありません。はマウスオーバーのように振る舞います。これが起こると、イベントは無限ループに入ります。以下の例を参照してください。JavaScriptが無限ループに入るイベント

<html> 
<head><title> 
</title></head> 
<body> 
    <script language="javascript" type="text/javascript"> 
     function showEdit(tcell) { 
      var editTag = document.createElement('a'); 
      editTag.appendChild(document.createTextNode("test2")); 
      editTag.setAttribute('name', 'test2'); 
      editTag.setAttribute('id', 'lnkEdit'); 
      editTag.setAttribute('href', '#'); 
      editTag.setAttribute('style', 'float:right;'); 
      tcell.appendChild(editTag); 
     } 
     function hideEdit(tcell) { 
      //var tcell = document.getElementById("tcAdd"); 
      var lnk = document.getElementById("lnkEdit"); 
      tcell.removeChild(lnk); 
     } 
    </script> 
    <div> 
     <table style="width:200px;"> 
      <tr> 
       <td id="tcAdd" style="border:1px solid #CCC" onmouseover="showEdit(this);" onmouseout="hideEdit(this);"> 
        <a href="#">test1</a> 
       </td> 
      </tr> 
     </table> 
    </div> 
</body> 
</html>

カーソルをtest1とtest2に置き、違いを確認してください。私は何かが明らかでないと思います。

おかげ

出典

2012-01-05 Samuel

[親絶対divの子要素をホバリングするときにonmouseoutを防止する]（http://stackoverflow.com/questions/4697758/prevent-onmouseout -hovering-子要素の親絶対的div） –

ありがとうございます – Samuel

さて、あなたはこのようにしたい場合、私は知りませんが、それは動作します：

<html> 
<head><title> 
</title></head> 
<body> 
    <script language="javascript" type="text/javascript"> 
     function showEdit(tcell) { 
      document.getElementById("lnkEdit").style.display="inline"; 
     } 
     function hideEdit(tcell) { 
      document.getElementById("lnkEdit").style.display="none"; 
     } 
    </script> 
    <div> 
     <table style="width:200px;"> 
      <tr> 
       <td id="tcAdd" style="border:1px solid #CCC" onmouseover="showEdit(this);" onmouseout="hideEdit(this);"> 
        <a href="#">test1</a> 
        <a href="#" id="lnkEdit" style="float: right; display:none">test2</a> 
       </td> 
      </tr> 
     </table> 
    </div> 
</body> 
</html>

それは、DOMを使用するよりも簡単な方法です。しかしDOMを使用したい場合、別のtry =）を取ることができます。

出典

2012-01-05 17:11:56

関数に渡す2番目のパラメータは何ですか？私はそれが使用されて表示されません。 –

@JamesMontagneあなたは正しいです！私はそれをテストし、削除するのを忘れたときに私はそれを使用しました。ありがとうございました。 –

アイデアは、2番目のアンカーを静的タグとして使用することではありませんでした。これは、ページにはたくさんのページがあり、動的に行うことでページの読み込み時間を短縮できます。 – Samuel

JavaScriptが無限ループに入るイベント

答えて

関連する問題