如何修复我的JQuery错误? [英] how to fix my JQuery bug?

问题描述

脚本位于jsfiddle上:代码

The script is on jsfiddle here : CODE

此刻的作用:这是一种具有两种类型的URL字段textarea和input的表单，它将这些字段中的文本转换为可单击的链接.

What it does at the moment: it's a form that have two types of URL field textarea and input, it converts the texts in those fields to a link to be click-able.

工作原理:如果您单击链接旁边的链接，则可以编辑链接或双击链接. 如果，您只需单击一次链接即可转到该页面.

How it works: if you click next to the link/links you can edit the link or on a double click on the link. IF you click once on the link it takes you to that page.

最新更新:我在最后一行添加了.trigger('blur');，因为，在此之前，文本区域显示了诸如一个合并链接之类的链接，<例如，strong>::test.com和test2.com显示为test.comtest2.com，在我添加了此最后更新之后，textera工作的拆分不仅在textarea的编辑上也加载在页面上(在没有最后一次更新的情况下工作，但仅当您编辑textarea并在链接之间放置一个空格时，并且我希望它在页面的负载上工作，因为textarea格式已经作为一个链接发送给行了.)

Last update: i added the .trigger('blur'); on the last line, Because before i did that, the text area was showing the links like one merged link, for example : test.com and test2.com were showing test.comtest2.com, after i added this last update, the split for textera work also on the load of page not just on the edit of textarea ( it was working without the last update but only when you edit the textarea and put between links a space, and i want it to be working on the load of page because the textarea format was sent already as one link pre row ).

我的问题:完成上次更新后，双击混乱了，它应该只能编辑链接，除非单击，否则不能进入该页面>但是现在，它可以对其进行编辑，并且只需一秒钟，它也可以转到该页面. 我想要只需双击即可进行编辑，而无需转到该页面.一键即可.

My problem: after i did this last update, the double click is messed up, it should just be able to edit the link and don't go to that page unless one click, but now it edits it and in like one second it goes also to that page. I want the double click just to edit without going to that page. and to go only with one click.

非常感谢！

代码也在这里:

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

推荐答案

双击始终是由以下一系列事件引起的:

A double-click is always predeeded by the following chain of events:

鼠标按下，鼠标向上，点击，鼠标按下，鼠标向上，点击， dblclick

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

您可以等待单击事件，然后检查双击事件是否随后发生. setTimeout 是您的朋友.确保从传递到处理程序的event对象复制所需的任何数据.该对象在处理程序完成后被销毁-在延迟的处理程序被调用之前 .

You can make your click-events wait and check if a double-click event happened afterwards. setTimeout is your friend. Be sure to copy any data you need from the event object passed to your handler. That object is destroyed after the handler finished - which is before your delayed handler is invoked.

您可以手动调度双击事件，以防止在单击事件之前执行单击事件. 参见小提琴

You can manually dispatch a double click event to prevent click-events from being executed prior to them. 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");
}

这篇关于如何修复我的JQuery错误?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！