JQuery

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" 之间的区别。当我点击元素并按住一段时间时，它会停止动画，但在 "mouseup" 之后它也会触发 "click" 事件。有什么办法可以拆分这些事件吗？或者我应该通过计算鼠标保持时间来做到这一点吗？

Answer 1

“点击”只是“鼠标按下”和“鼠标弹起”的完整循环。缺一不可。

为了让您的代码了解差异，您需要一个变量来跟踪您的意图。

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

var intention = "click";

在您的 mousedown 函数中，暂停动画并启动计时器。我们将使用这个计时器来检测鼠标按下的时间（即，如果超过一秒，则不是单击，您只想触发鼠标弹起）

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

在您的鼠标松开功能中，取消此超时。如果在几毫秒后调用鼠标弹起，那么你想要点击。

clearTimeout(detectIntention);

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

检查您想要执行点击的点击功能；

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

JQuery - mousedown,mouseup 并点击相同的元素

JQuery - mousedown,mouseup and click on same element

javascript

click

mouseup

mousedown