События Javascript, входящие в бесконечный цикл - PullRequest
1 голос
/ 05 января 2012

Мне нужно иметь возможность динамически создавать гиперссылку при наведении курсора мыши и удалять ее при событии указателя мыши. Однако, когда мышь переходит по ссылке, она мне нужна, чтобы не вел себя так, как если бы она была мышью. Когда это происходит, события уходят в бесконечный цикл. см. пример ниже:

<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, чтобы увидеть разницу. Я думаю, что упускаю что-то очевидное.

Спасибо

1 Ответ

0 голосов
/ 05 января 2012

Ну, я не знаю, хотите ли вы так, но это работает:

<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, я могу попробовать еще раз =)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...