Question

我需要能够在鼠标悬停时动态创建超链接，并在mouseout事件中将其删除。但是，当鼠标越过链接时，我需要它 not 的行为就好像它是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上以查看差异。我想我错过了一些明显的东西。

由于

Answer 1

好吧，我不知道你是否想要这样，但它确实有效：

<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，我可以采取另一种尝试=）

Javascript事件进入无限循环

1 个答案: