1

描述
在我们的社区网站上，每个用户的昵称都是指向其个人资料页面的链接，但如果双击昵称，则会在昵称下方显示该用户的菜单。此弹出菜单的内容是使用 ajax 调用加载的。到目前为止，我们在锚点 href 中使用了“javascript:”，并使用 JS 捕获了单击/双击。我们希望清理 href 并添加正确的 url 以允许用户在选项卡等中打开配置文件链接，同时仍保留双击菜单。我意识到这不是最好的设计，它只是变得有点痴迷于工作。

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

到目前为止的代码
使用问题 1067464中的答案1067484（不允许发布链接）作为以下内容的基础

    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 是否暂停设置延迟。在 url “启动”之前必须等待 300 毫秒是没有问题的。
我将不得不放弃这个并使用window.location吗？可以使用 .live() 和 .die() 解决吗？

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

4

2 回答 2

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

于 2010-11-11T18:20:19.580 回答
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 */
});
于 2010-11-16T15:54:25.037 回答