JavaScript events going into infinite loop

Question

I need to be able to create a hyperlink dynamically on mouseover and remove it on mouseout event. However, when the mouse goes over the link I need it to not behave as if it is mouseout. When this happens the events goes into infinite loop. See example below:

<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>

Put the cursor on test1 and test2 to see the difference. I think I am missing something obvious.

possible duplicate of [prevent onmouseout when hovering child element of the parent absolute div](http://stackoverflow.com/questions/4697758/prevent-onmouseout-when-hovering-child-element-of-the-parent-absolute-div) — James Montagne, Jan 05 '12 at 16:28

score 0 · Answer 1 · 2012-01-05T18:38:08.453

0

Well, I don't know if you want like this, but it works:

<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>

It's a simpler way than using DOM. But if you want to use DOM, I can take another try =)

edited Jan 05 '12 at 18:38

answered Jan 05 '12 at 17:11

What is the 2nd parameter you are passing to the functions? I don't see that being used. – James Montagne Jan 05 '12 at 18:35
@JamesMontagne you're right! I used that when I testing and forgot to remove. Thank you. – Jan 05 '12 at 18:38
The idea was not to use the second anchor as a static tag. This is because the page has lots of these and by doing it dynamically, I can reduce the load time of the page. – Samuel Jan 05 '12 at 20:56

JavaScript events going into infinite loop

1 Answers1