Question

描述
在我们的社区网站上，每个用户nick都是指向其个人资料页面的链接，但如果双击该昵称，则该用户的菜单会显示在该昵称下方。使用ajax调用加载此弹出菜单的内容。到目前为止，我们在锚点hrefs中使用了“javascript：”，并使用JS捕获了单击/双击。我们想要清理href并添加适当的URL以允许用户在标签等中打开配置文件链接，同时仍然保持双击菜单。我意识到这不是最好的设计，它只是对工作的一种痴迷。

问题
因此，我希望单击可以正常运行（将浏览器发送到href），同时双击preventDefault并调用自定义函数（事件）。我可以通过在单击部分中使用window.location来实现这一点，但这感觉就像我想要改进的妥协/黑客。

到目前为止

代码
使用answer 1067484中的question 1067464（不允许发布链接）作为以下

的基础

    jQuery(document).ready(function($) {
        $("#hello")
            .bind('click', singleClick)
            .bind('dblclick', doubleClick);
    });

    function singleClick(e) {
        e.preventDefault();
        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');
                // Attempting to make browser follow original href url:
                $(el).unbind('click', singleClick);
            }
        }, 300);
    }

    function doubleClick(e) {
        $(this).data('double', 2);
        e.preventDefault();
        $('#result').html('double-click registered - browser should stay here');
        // Display dblclick popup-menu here
    }

（查看/编辑http://jsbin.com/iboyo5/2）

我只缺少这个单击部分，我想要一个比window.location更“清洁”的方式，这就是为什么我要摆弄.unbind（） - 这也不是100％的解决方案。 .unbind（）函数可以执行我想要的操作，但它不会卸载当前代码运行的处理程序，因此它只对每两次单击执行一次。这是我现在需要解决的问题。

顺便说一句：我不介意第一个.click是否暂停了设定的延迟。在网址“发布”之前必须等待300毫秒才有问题我是否必须放弃这个并使用window.location？可以使用.live（）和.die（）来解决吗？

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

Answer 1

以下解决方案可帮助您获得所需的功能：

示例标记：

<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属性，假设它们是唯一的。

Answer 2

发布我们最终得到的内容，以防其他人稍后需要相同的功能。这是使用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 */
});

如果双击，则jquery preventDefault链接的锚点

2 个答案: