如何修复我的 JQuery 错误

how to fix my JQuery bug?

本文关键字：错误 JQuery 我的 何修复      更新时间：2023-09-26

脚本在jsfiddle上：

代码

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

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

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

我

的问题：在我完成最后一次更新后，双击搞砸了，它应该只能编辑链接并且除非单击一次否则不会转到该页面，但现在它对其进行了编辑，并且在大约一秒钟内它也转到了该页面。我希望双击只是为了编辑而不转到该页面。并且只需单击一下即可。

提前非常感谢！

代码也在这里：

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

双击始终由以下事件链作为前缀：

鼠标向下，鼠标向上，单击，

鼠标向下，鼠标向上，单击，dbl点击

您可以让点击事件等待，并检查之后是否发生了双击事件。 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");
}

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

参考我之前的回答。

为了您的快速参考，我已在此处粘贴了我的答案

$('.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);
            });
        }
    });
});
​
相关文章：