자바 무한 루프로 들어가는 이벤트

마우스 오버시 동적으로 하이퍼 링크를 만들고 mouseout 이벤트에서이를 제거 할 수 있어야합니다. 그러나 마우스가 링크 위로 이동하면 이 아닌은 마치 mouseout 인 것처럼 동작합니다. 이런 일이 발생하면 이벤트는 무한 루프가됩니다. 아래 예를 참조하십시오.자바 무한 루프로 들어가는 이벤트

<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 -when-hovering-child-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을 사용하고 싶다면 다른 try =)

출처

2012-01-05 17:11:56

함수에 전달할 두 번째 매개 변수는 무엇입니까? 나는 그것이 사용되는 것을 보지 못했다. –

@JamesMontagne 네가 맞아! 나는 그것을 테스트하고 제거하는 것을 잊었을 때 그것을 사용했습니다. 고맙습니다. –

두 번째 앵커를 정적 태그로 사용하지 않는 것이 좋습니다. 이는 페이지에 이러한 항목이 많고 동적으로 처리하므로 페이지의로드 시간을 줄일 수 있습니다. – Samuel

자바 무한 루프로 들어가는 이벤트

답변

관련 문제