События 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

Возможный дубликат [предотвращать onmouseout при наведении дочернего элемента родительского абсолютного div] (http://stackoverflow.com/questions/4697758/prevent-onmouseout -when-hovering-child-element-of-the-parent-absolute-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, я могу взять еще одну попытку =)

источник

2012-01-05 17:11:56

. Каков второй параметр, который вы передаете в функции? Я не вижу, что это используется. –

@JamesMontagne, ты прав! Я использовал это, когда тестировал и забыл удалить. Спасибо. –

Идея заключалась в том, чтобы не использовать второй якорь в качестве статического тега. Это связано с тем, что на странице их много, и, делая это динамически, я могу уменьшить время загрузки страницы. – Samuel

События Javascript, идущие в бесконечный цикл

ответ

Смежные вопросы