Question

脚本位于jsfiddle：CODE

目前它的作用：它是一种具有两种类型的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');

Answer 1

双击始终由以下事件链预先确定：

mousedown，mouseup，点击，mousedown，mouseup，点击， 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);
            });
        }
    });
});

如何修复我的JQuery错误？

3 个答案: