0

该脚本在此处的 jsfiddle 上：代码

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

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

上次更新：我.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');
4

3 回答 3

2

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

mousedown, mouseup, click , mousedown, mouseup, click , 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

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

于 2012-06-28T10:37:16.797 回答
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 回答