javascript: 长按书签答案

【问题标题】：javascript: long click for a bookmarkletjavascript: 长按书签
【发布时间】：2012-02-13 00:30:19
【问题描述】：

我需要识别 JavaScript 小书签中的长按。所以，我不能使用 jQuery，也不能使用 onclick() 事件和类似事件。有可能吗，怎么做？

【问题讨论】：

【解决方案1】：

onmousedown，在长按期间致电setTimeout()。如果允许超时过期，它将调用其函数来执行您希望在长按时执行的任何操作。但是，onmouseup 如果 setTimeout() 尚未过期，您将取消它。

<script type='text/javascript'>
// t will hold the setTimeout id
// Click for 1 second to see the alert.
var t;
</script>

<button onmousedown='t=setTimeout(function(){alert("hi");}, 1000);' onmouseup='clearTimeout(t);'>Clickme</button>

Here it is in action in jsfiddle

【讨论】：

这个例子很好。但是在书签中我不能使用按钮，不是吗？
@tic 它不一定是一个按钮。那只是最简单的例子。任何支持 onmousedown/onmouseup 的元素都可以使用。 <div>，<span>，随便你
也许我没有很好地完成我的问题。我想要一个能够做两件不同事情的小书签：一件是用户点击它，另一件是用户长时间点击它。在我看来，我不能使用“普通”网页的任何元素，如按钮、div 等。
@tic 我不认为这是可能的 - 小书签只能运行一个功能，并且不能真正接收任何鼠标事件，因为它不是页面元素跨度>

【解决方案2】：

长点击不就是mousedown 和mouseclick 事件相距很远的点击吗？为了解决这个问题，您可以测量从mousedown 事件到单击事件所需的时间并检查它是否是，例如超过两秒（或任何你想要的）。

您可以通过new Date().getTime() 访问自 1970 年 1 月 1 日以来的当前毫秒数。鉴于我会直观地检查这样的“长按”。

$(".selector").mousedown(function() {
    $(this).data("timestamp", new Date().getTime());
}).click(function(event) {
    var e = $(this);

    var start = e.data("timestamp");
    e.removeData("timestamp");

    if (start && new Date().getTime() - start > YOUR_DESIRED_WAIT_TIME_IN_MILLISECONDS) {
        // Trigger whatever you want to trigger
    } else {
        event.preventDefault();
        event.stopPropagation();
    }
});

【讨论】：

你使用过 jQuery 或其他库吗？
这是使用 jQuery 完成的。不确定您的要求是否实际上是不使用 jQuery，或者这个是否对您也有帮助。

【解决方案3】：

延迟回复，但不是单击/长按来提供两种不同的操作，您可能需要考虑单击/双击。

第一次点击：记录时间，然后定时器在 500 毫秒内执行 action1。

第二次点击：如果距离最后一次点击的时间很短，取消计时器并执行action2。如果距离上次点击的时间很长，那么这是第一次点击。

没有什么能阻止您使用三次点击等。

【讨论】：