0

我最近开始学习 jQuery，只是搞砸了我决定做一个 RTE 然而，我注意到当我去输入一个超链接时，它在超链接已经插入后会提示几次，并且似乎每次你都会增加单击超链接按钮。

    $('#hyperlink').mouseover(function(){
        $('#hyperlink').css('color','#000000')
        $('#hyperlink').mouseout(function(){
            $('#hyperlink').css('color','#999999')
        });
        $('#hyperlink').click(function(){
            var url;
            url = prompt('Enter the URL you wish to link:','http://');
            $('#contentArea').focus()
            if(url != '' && url != null){
                $('#contentArea').append('<a href=\"' + url + '\">' + url + '</a>')
            }
        });
});

小提琴 - http://jsfiddle.net/vMFb9/

4

6 回答 6

4

您正在鼠标悬停处理程序中添加点击处理程序。

每次鼠标移入元素（或其后代）时，您都在添加另一个单击处理程序。
当您单击它时，所有这些处理程序都会按顺序运行。

这不是一个好主意。

于 2013-04-12T20:22:50.307 回答
4

从鼠标悬停中拉出您的点击事件，例如：

    $('#hyperlink').mouseover(function () {
        $('#hyperlink').css('color', '#000000')
        $('#hyperlink').mouseout(function () {
            $('#hyperlink').css('color', '#999999')
        });
    });
    $('#hyperlink').click(function () {
        var url;
        url = prompt('Enter the URL you wish to link:', 'http://');
        $('#contentArea').focus()
        if (url != '' && url != null) {
            $('#contentArea').append('<a href=\"' + url + '\">' + url + '</a>')
        }
    });

jsFiddle 示例

由于您在代码中放置点击事件的位置，它被多次触发。

于 2013-04-12T20:23:13.650 回答
1
  1. 您不应该嵌套 mouseout 或clickmouseover 内部
  2. 你应该使用mouseenter和mouseleave

  3. 您可以使用.on()它们将它们合二为一！

    $('#hyperlink').on({
    mouseenter:function(){
        $(this).css('color','#000000');
    },
    mouseleave:function(){
        $(this).css('color','#999999');
    },
    click:function(){
        var url = prompt('Enter the URL you wish to link:','http://'),
            $contentArea = $('#contentArea');

        $contentArea.focus();
        if(!isEmpty(url)){
            $contentArea.append('<a href=\"' + url + '\">' + url + '</a>');
        }
    }
});

function isEmpty(str) {
    return (!str || 0 === str.length);
}

应该这样做！将它们组合成一个.on()绑定的原因是因为不需要每次都抓取 DOM 来进行操作。现在该项目只需要找到一次，并且可以将所有事件绑定到它。这是执行预期操作的最快方式。

编辑：更新了一个很酷的函数来检查字符串是否为空。

于 2013-04-12T20:25:22.367 回答
0

你得让他们分开！事件处理程序就是这样。mouseover每次将鼠标悬停在超链接上时，事件处理程序都会将新的处理程序附加到超链接。

$('#hyperlink').mouseover(function(){
    $('#hyperlink').css('color','#000000')
});

$('#hyperlink').mouseout(function(){
        $('#hyperlink').css('color','#999999')
});

$('#hyperlink').click(function(){
    var url;
    url = prompt('Enter the URL you wish to link:','http://');
    $('#contentArea').focus()

    if(url != '' && url != null){
        $('#contentArea').append('<a href=\"' + url + '\">' + url + '</a>')
    }
 });
于 2013-04-12T20:24:19.207 回答
0

也可以，但不应该使用，至少让你知道它为什么不工作：

看演示

$('#hyperlink').mouseover(function(){
                $('#hyperlink').css('color','#000000')
                $('#hyperlink').off('mouseout').mouseout(function(){
                    $('#hyperlink').css('color','#999999')
                });
                $('#hyperlink').off('click').click(function(){
                    var url;
                    url = prompt('Enter the URL you wish to link:','http://');
                    $('#contentArea').focus()
                    if(url != '' && url != null){
                        $('#contentArea').append('<a href=\"' + url + '\">' + url + '</a>')
                    }
                });
        });
于 2013-04-12T20:26:48.240 回答
0

你应该分开

$('#hyperlink').click(function(){});

从鼠标悬停功能

于 2013-04-12T20:30:14.033 回答