2010-11-11 32 views
1

说明
在我们的社区网站每个用户昵称是他们的个人资料页面的链接,但如果缺口被双击显示在尼克低于这个用户的菜单。这个弹出式菜单的内容使用ajax调用加载。到目前为止,我们已经在anchor hrefs中使用了“javascript:”,并且使用JS捕获了单击/双击。我们希望清理hrefs并添加适当的URL以允许用户在标签等中打开配置文件链接,同时仍然保持双击菜单。我意识到这不是最好的设计,它只是变得有点痴迷于工作。的jQuery的preventDefault链接的锚如果双击

问题
所以我想单次点击来充当正常(发送浏览器HREF),同时双击的preventDefault和调用自定义函数(事件)来代替。我可以通过在单击部分中使用window.location来完成此操作,但这感觉就像我想改进的折中/破解。

代码到目前为止
运用question 1067464(不允许张贴链接)answer 1067484为依据以下

(参见/编辑住在http://jsbin.com/iboyo5/2

我唯一缺少的这个单击部分,我想要一个比window.location更“干净”的方式,这就是为什么我摆弄.unbind() - 这不是100%的解决方案。 .unbind()函数完成我想要的功能,但它不会卸载当前代码运行的处理程序,因此每两次单击就只能运行一次。这是我现在需要解决的问题。

顺便说一句:我不介意第一个.click是否暂停了设置的延迟。在url“启动”之前不得不等待300毫秒是没有问题的。
我将不得不放弃这一个,并使用window.location? 可以使用.live()和.die()来解决吗?

希望我在我的第一篇文章之前做了足够好的研究。谢谢!

回答

0

发布我们已经结束的情况,以防其他人稍后需要相同的功能。这是使用window.location来“撤消”preventDefault操作。我很乐意学习一种更清洁的方法,但现在将解决这个问题。

jQuery(document).ready(function($) { 

    /* Member popup menu - Handle single and double clicks for member-links */ 
    function singleClick(e) { 
    e.preventDefault(); 
    var url = $(this).attr("href"); 
    var el = this; 
    setTimeout(function() { 
     var dblclick = parseInt($(el).data('double'), 10); 
     if (dblclick > 0) { 
     $(el).data('double', dblclick-1); 
     } else { 
     $('#result').html('click registered - browser should proceed to url'); 
     window.location = url; 
     } 
    }, 300); 
    } 

    function doubleClick(e) { 
    e.preventDefault(); 
    $('#result').html('double-click registered - browser should stay here'); 
    $(this).data('double', 2); 
    var full_id = $(this).attr("id"); 
    var ids = full_id.split("_"); 
    var id = ids[1]; 
    $.ajax({ 
     url: "....php", 
     data: { 
     page: "ajax.getMemberPopup", 
     id: id 
     }, 
    }); 
    } 

    $(".profile") 
    .bind('click', singleClick) 
    .bind('dblclick', doubleClick); 
    /* End member popup menu */ 
}); 
0

以下解决方案可以帮助你得到的功能,你的愿望:

样品标记:

<a class="profile" href="#">Stewie</a> 
<br/> 
<a class="profile" href="#">Brian</a> 
<br/> 
<div id="result"/> 

的Javascript:

var clickCount = 0; 
var clickTimeout; 
var currentTarget; 

function evaluateClicks(targetElement) { 
    if (clickCount === 1) { 
     $("#result").text(targetElement.text() + ": clicked once"); 
    } else if (clickCount > 1) { 
     $("#result").text(targetElement.text() + ": clicked twice or more"); 
    } 
    clickCount = 0; 
} 

$("a.profile").click(function(e) { 
    e.preventDefault(); 
    var targetElement = $(e.target); 
    /*check to see if the target's href is the same 
    the comparison does not need to be on the href, just something 
    so you can differentiate the two elements from each other. 
    */ 
    if (currentTarget && targetElement.attr("href") !== currentTarget.attr("href")) { 
     clearTimeout(clickTimeout); 
     clickCount = 0; 
    } 
    currentTarget = targetElement; 
    clickCount++; 
    var thingToDo = function() { 
     evaluateClicks(targetElement); 
    }; 
    //reset the current timeout 
    clearTimeout(clickTimeout); 
    clickTimeout = setTimeout(thingToDo, 300); 
}); 

注意,元素之间的比较是基于关闭href属性,假设它们是唯一的。

+0

感谢您的回答 - 但我确实看不到这与我之前的状况有什么不同?要解决这个问题:我希望单击一下按照原始的href,而双击preventDefault并调用一个自定义函数。 – ccondrup 2010-11-12 08:03:22