如何修复我的 JQuery 错误？

Question

脚本在 jsfiddle 上：CODE

目前的作用：它是一种具有两种类型的 URL 字段 textarea 和 input 的表单，它将这些字段中的文本转换为可点击的链接。

工作原理：如果您点击链接旁边的链接，您可以编辑链接或双击链接。 如果您单击一次链接，它会将您带到该页面。

最后更新：我在最后一行添加了.trigger('blur');，因为在我这样做之前，文本区域显示的链接就像一个合并的链接，例如：test.com 和 test2.com 显示 test.comtest2.com，在我添加了最后一次更新后，textera 的拆分也适用于页面加载，而不仅仅是 textarea 的编辑（它是在没有最后一次更新的情况下工作，但只有当您编辑 textarea 并在链接之间放置一个空格时，我希望它能够在页面加载时工作，因为 textarea 格式已经作为一个链接前行发送）。

我的问题：在我上次更新后，双击搞砸了，它应该只能编辑链接，除非单击，否则不会进入该页面，但是现在它会编辑它，并且在一秒钟内它也会进入该页面。 我想要双击只是为了编辑而不去那个页面。并且只需单击一下即可。

提前非常感谢！

代码也在这里：

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

Answer 1

双击总是先于以下事件链：

mousedown, mouseup, click, mousedown, mouseup, click, dblclick

您可以让您的点击事件等待并检查之后是否发生了双击事件。 setTimeout 是你的朋友。请务必从传递给您的处理程序的event 对象中复制您需要的任何数据。该对象在处理程序完成后被销毁 - 这是在调用延迟处理程序之前。

---

您可以手动调度双击事件以防止单击事件在它们之前执行。 See the Fiddle

// 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");
}

Answer 2

jsfiddle 出于某种原因拒绝加载我的连接，所以看不到代码。 根据您的解释，我建议您查看event.preventDefault 以增加对点击事件应该发生的事情的更多控制。这可以与@rodneyrehm 的回答结合使用。

Answer 3

参考我之前的answer。

为了您的快速参考，我已将我的答案粘贴在这里

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