jQuery-mousedown，mouseup並單擊同一元素

Question

我有一個輪播，我需要讓他像Instagram輪播一樣工作。 在單擊更改幻燈片時，但在鼠標按下時停止動畫。 我的jQuery：

 $(".fancy-carousel").on('mousedown',function (e) {
    ...stop animation
});

$(".fancy-carousel").on('mouseup',function (e) {
  ..continue animation
});

$(".fancy-carousel").on('click',function (e) {
   ..change slide
});

但是我不知道如何讓腳本知道“ click”和“ mousedown”之間的區別。 當我單擊元素並保持一段時間時，它會停止動畫，但在“鼠標”操作后也會觸發“點擊”事件。 有什么辦法可以拆分此事件？ 還是應該通過一些鼠標保持時間來計算？

Answer 1

“點擊”只是“鼠標按下”和“鼠標向上”的整個周期。 你不能沒有一個。

為了讓您的代碼了解不同之處，您需要一個變量來跟蹤您的意圖。

1. 創建一個變量以跟蹤您的意圖-默認為“點擊”。

var intention = "click";

2. 在鼠標按下功能中，暫停動畫並啟動計時器。 我們將使用此計時器來檢測鼠標按下的時間（即，如果持續一秒鍾以上，則不是單擊，您只想觸發鼠標向上）

var detectIntention = setTimeout(function(){
    intention = "mouseup";
})

3. 在鼠標上移功能中，取消此超時。 如果僅在幾個MS之后調用了鼠標上移，則您要單擊。

clearTimeout(detectIntention);

if (intention === "mouseup") {
  // do mouseup stuff
}
// reset intention
intention = click;

4. 簽入您想要點擊的點擊功能；

if (intention === "click") {
  // do click stuff
}