JavaScript：长按书签工具的方法

Question

我需要在JavaScript书签中识别长按操作，因此不能使用jQuery，也不能使用onclick()事件等。是否有可能实现，并如何实现？

- tic

Answer 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>

这是在jsfiddle中的实际效果

- Michael Berkowski

---

这个例子很好。但是在书签脚本中，我不能使用按钮，对吧？ - tic

@tic 它不一定是一个按钮。那只是最简单的例子。任何支持 onmousedown/onmouseup 的元素都可以使用。<div>，<span>，你需要什么就用什么。 - Michael Berkowski

也许我没有很好地表达我的问题。我想要一个书签小工具，它能够做两件不同的事情：如果用户单击它，则执行一项操作；如果用户长时间单击它，则执行另一项操作。在我看来，我不能使用任何“普通”网页元素，如按钮、div等。 - tic

@tic 我认为这是不可能的 - 一个书签小程序只能运行单个函数，并且不能接收任何鼠标事件，因为它不是页面元素。 - Michael Berkowski

Answer 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();
    }
});

- nre

---

你是否使用过jQuery或其他库？ - tic

这是使用jQuery完成的。我不确定您的要求实际上是否不使用jQuery或者这个也有帮助。 - nre

Answer 3

晚回复了，但是与其使用点击/长按来提供两个不同的操作，您可能想考虑使用单击/双击。

第一次单击：记录时间，然后在500毫秒内启动计时器执行操作1。

第二次单击：如果自上次单击以来的时间很短，则取消计时器并执行操作2。如果自上次单击以来的时间很长，则这是第一次单击。

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

- DG.