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. clickmouseout またはmouseover の内部にネストしないでください
  2. とを使用する必要がmouseenterあります。mouseleave

  3. それらをすべて1つに結合するために使用できます.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);
}

それはそれを行う必要があります！それらを 1 つの.on()バインディングに結合する理由は、操作のたびに DOM をスクレイピングする必要がないためです。これで、アイテムを 1 回見つけるだけで、すべてのイベントをそれにバインドできます。これは、意図した操作を実行する最速の方法です。

EDIT : 文字列が空かどうかをチェックするクールな関数で更新されました。

于 2013-04-12T20:25:22.367 に答える
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 に答える