0

スクリプトは jsfiddle にあります: CODE

現時点での動作: URL フィールド テキストエリアと入力の 2 種類のフォームであり、これらのフィールド内のテキストをリンクに変換してクリックできるようにします。

仕組み:リンクの横をクリックすると、リンクを編集するか、リンクをダブルクリックできます。リンクを 1 回クリックすると、そのページに移動します。

最後の更新:.trigger('blur');最後の行に を追加しました。それを行う前は、テキスト領域に 1 つのマージされたリンクのようなリンクが表示されていたため、たとえば:が表示されていました。この最後の更新を追加した後、textera の分割も機能しますテキストエリアの編集時だけでなく、ページのロード（最後の更新なしで機能していましたが、テキストエリアを編集してリンクの間にスペースを入れた場合のみでした。テキストエリアのフォーマットが1 つのリンクの前の行として既に送信されます)。test.comtest2.comtest.comtest2.com

私の問題：この最後の更新を行った後、ダブルクリックが台無しになり、リンクを編集できるはずで、ワンクリックしない限りそのページに移動しないはずですが、今では編集して1秒ほどで移動しますそのページにも。そのページに移動せずに編集するためだけにダブルクリックしたい。ワンクリックで移動できます。

よろしくお願いします！

コードもここにあります：

$('.a0 a').click(function(){

var href = $(this).attr('href');

// Redirect only after 500 milliseconds
if (!$(this).data('timer')) {
   $(this).data('timer', setTimeout(function () {
      window.open(href, '_blank')
   }, 500));
}
return false; // Prevent default action (redirecting)});

$('.a0').dblclick(function(){
clearTimeout($(this).find('a').data('timer'));
$(this).find('a').data('timer', null);

$(this).parent().find('input,textarea').val($(this).find('a').text()).show().focus();
$(this).hide();})

$('.a0').click(function(){
       $(this).parent().find('input,textarea').val($.map($(this).find('a'),function(el){return $(el).text();}).join(" ")).show().focus();
$(this).hide();})

$('#url0, #url1,#url4').each(
function(index, element){
    $(element).blur(function(){
            var vals = this.value.split(/\s+/),
    $container = $(this).hide().prev().show().empty();

$.each(vals, function(i, val) {
    if (i > 0) $("<span><br /></span>").appendTo($container);
    $("<a />").html(val).attr('href',/^https?:\/\//.test(val) ? val : 'http://' + val).appendTo($container);;
});  })
}).trigger('blur');
4

3 に答える 3

2

ダブルクリックの前には、常に次の一連のイベントが発生します。

マウスダウン、マウスアップ、クリック、マウスダウン、マウスアップ、クリック、dblclick

クリックイベントを待機させ、その後ダブルクリックイベントが発生したかどうかを確認できます。setTimeoutはあなたの友達です。eventハンドラーに渡されたオブジェクトから必要なデータをコピーしてください。そのオブジェクトは、ハンドラーが終了した後、つまり遅延ハンドラーが呼び出される前に破棄されます。

ダブルクリックイベントを手動でディスパッチして、クリックイベントがそれらの前に実行されないようにすることができます。フィドルを見る

// ms to wait for a doubleclick
var doubleClickThreshold = 300;
// timeout container
var clickTimeout;
$('#test').on('click', function(e) {
    var that = this;
    var event;

    if (clickTimeout) {
        try {
            clearTimeout(clickTimeout);
        } catch(x) {};

        clickTimeout = null;
        handleDoubleClick.call(that, e);
        return;
    }

    // the original event object is destroyed after the handler finished
    // so we'll just copy over the data we might need. Skip this, if you
    // don't access the event object at all.
    event = $.extend(true, {}, e);
    // delay click event
    clickTimeout = setTimeout(function() {
        clickTimeout = null;
        handleClick.call(that, event);
    }, doubleClickThreshold);

});

function handleClick(e) {
    // Note that you cannot use event.stopPropagation(); et al,
    // they wouldn't have any effect, since the actual event handler
    // has already returned
    console.log("click", this, e);
    alert("click");
}

function handleDoubleClick(e) {
    // this handler executes synchronously with the actual event handler,
    // so event.stopPropagation(); et al can be used!
    console.log("doubleclick", this, e);
    alert("doubleclick");
}
于 2012-06-28T10:26:59.697 に答える
0

以前の回答を参照してください。

あなたのクイックリファレンスのために、私はここに私の答えを貼り付けました

$('.a0 a').click(function(){
    var href = $(this).attr('href');

    // Redirect only after 500 milliseconds
    if (!$(this).data('timer')) {
        $(this).data('timer', setTimeout(function() {
            window.open(href, '_blank')
        }, 500));
    }
    return false; // Prevent default action (redirecting)
});

$('.a0').dblclick(function(){
    var txt = document.createElement('div');
    $.each($(this).find('a'), function(i, val) {
        clearTimeout($(val).data('timer'));
        $(val).data('timer', null);
        $(txt).append($(val).text()); 
        $("<br>").appendTo(txt);
    });
    var content = $(this).parent().find('input,textarea');
    var text = "";
    $.each($(txt).html().split("<br>"), function(i, val) {
        if (val != "")
            text += val + "\n"; 
    });
    $(content).html(text);
    $(this).hide();
    $(content).show().focus();
})


$('#url0, #url1, #url4').each(function(index, element) {
    $(element).blur(function(){
        if ($(this).val().length == 0)
            $(this).show();
        else
        {
            var ele = this;
            var lines = $(ele).val().split("\n");
            var divEle = $(ele).hide().prev().show().empty();
            $.each(lines, function(i, val) {
                $("<a />").html(val).attr({
                    'href': val, 
                    'target': '_blank'}).appendTo(divEle);
                $("<br/>").appendTo(divEle);
            });
        }
    });
});
​
于 2012-06-28T22:51:43.803 に答える
0

何らかの理由で jsfiddle が接続での読み込みを拒否するため、コードが表示されません。あなたの説明に基づいて、event.preventDefaultを調べて、クリックイベントで何が起こるかをさらに制御することをお勧めします。これは、@rodneyrehm の回答と組み合わせて使用​​できます。

于 2012-06-28T10:37:16.797 に答える