Question

我最近开始学习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/

Answer 1

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

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

这不是一个好主意。

Answer 2

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

    $('#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 example

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

Answer 3

您不应将鼠标悬停或click嵌入鼠标悬停
您应该使用mouseenter和mouseleave

您可以使用.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。现在只需要找到一次该项目，并且可以将所有事件绑定到该项目。这是执行预期操作的最快方法。

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

Answer 4

你得保持分开！事件处理程序是。 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>')
    }
 });

Answer 5

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

SEE DEMO

$('#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>')
                    }
                });
        });

Answer 6

你应该分开

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

来自鼠标悬停功能

不循环时提示循环

6 个答案: