JQuery - mousedown, mouseup и нажмите на тот же элемент - PullRequest
Новая
       53

JQuery - mousedown, mouseup и нажмите на тот же элемент

0 голосов
/ 11 июня 2019

У меня есть карусель, и мне нужно заставить его работать так же, как и в карусели Instagram.На клике смените слайд, а на mousedown просто остановите анимацию.Мой 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
});

Но я не знаю, как мне дать сценарию понять разницу между «щелчком» и «размышлением».Когда я нажимаю на элемент и удерживаю какое-то время, анимация останавливается, но после «mouseup» она вызывает событие «click».Есть ли способ, как разделить это события?Или я должен сделать это с некоторым расчетом времени удержания мыши?

1 Ответ

2 голосов
/ 11 июня 2019

«Щелчок» - это всего лишь полный цикл «mousedown» и «mouseup».Вы не можете иметь одно без другого.

Чтобы ваш код узнал разницу, вам понадобится переменная, которая отслеживает ваши намерения.

  1. Создайте переменную, чтобы отслеживать ваши намерения - по умолчанию она «щелкает». 
var intention = "click";
В функции mousedown приостановите анимацию и запустите таймер.Мы будем использовать этот таймер для определения того, как долго мышь не работает (т. Е. Если она длится более секунды, это не щелчок, и вы просто хотите запустить mouseup) 
var detectIntention = setTimeout(function(){
    intention = "mouseup";
})
В вашей функции мыши отмените это время ожидания.Если после нескольких мс вызывается указатель мыши, то вы хотите сделать клик. 
clearTimeout(detectIntention);

if (intention === "mouseup") {
  // do mouseup stuff
}
// reset intention
intention = click;
Отметьте в своей функции клика, что вы хотите сделать клик; 
if (intention === "click") {
  // do click stuff
}
...