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

“单击”只是“鼠标按下”和“鼠标向上”的整个周期。你不能一无所有。

要让您的代码了解不同之处，您需要一个变量来跟踪您的意图。

创建变量以跟踪您的意图-默认为“点击”。

var intention = "click";

在鼠标按下功能中，暂停动画并启动计时器。我们将使用此计时器来检测鼠标按下的时间（例如，如果鼠标停留一秒钟以上，则不是单击，而您只想触发鼠标按下）

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

在鼠标上移功能中，取消此超时。如果仅在几个MS之后调用了鼠标上移，则您要单击。

clearTimeout(detectIntention);

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

签入您要单击的点击功能；

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

jQuery-mousedown，mouseup并单击同一元素

1 个答案: