Как избежать одновременного зажатия двух кнопок мыши?

Question

[Nikita Dergachov]

Есть счётчик и при зажатии кнопки мыши значение увеличивается, когда отпускаешь значение останавливается, но когда зажимаешь сразу 2 кнопки, события происходят одновременно и значение растут в двое быстрее. И когда отпускаешь кнопку увеличение счётчика не останавливается. Как сделать, чтобы 2 зажатые клавиши обрабатывались как одна зажатая клавиша мыши?

$(this.$el).find('.jplus-setting-vue').mousedown(function() {
                        theInterval = setInterval(function() {
                            vm.crowdfunding.goal =
                                (parseFloat(vm.crowdfunding.goal) ?parseFloat(vm.crowdfunding.goal):0) + addVelocity;
                            counter++;
                            if (addVelocity < 25) {
                                addVelocity++;
                            }

                        }, 400);
                    });
                    $(this.$el).find('.jplus-setting-vue').mouseup(function() {
                        window.clearInterval(theInterval);
                        if (counter === 0) {
                            vm.crowdfunding.goal++; 
                        }
                        counter = 0;
                        addVelocity = 1;
                    });

Answer 1

[Nikita Dergachov]

Исправил. Добавил проверку, чтобы только один интервал.

var theInterval = null;
                    $(this.$el).find('.jplus-setting-vue').mousedown(function() {
                        if(theInterval === null){
                            theInterval = setInterval(function() {
                                vm.crowdfunding.goal =
                                    (parseFloat(vm.crowdfunding.goal) ?parseFloat(vm.crowdfunding.goal):0) + addVelocity;
                                counter++;
                                if (addVelocity < 25) {
                                    addVelocity++;
                                }

                            }, 400);
                        }
                    });

                    $(this.$el).find('.jplus-setting-vue').mouseup(function() {
                        window.clearInterval(theInterval);
                        if (counter === 0) {
                            vm.crowdfunding.goal++; // it was just click
                        }
                        counter = 0;
                        addVelocity = 1;
                        theInterval = null;
                    });

Answer 2

[Евгений Калибров]

Вообще игнорируй нажатие других кнопок мыши, кроме левой, для этого нужно в объекте события проверять свойство event.which:

$(this.$el).find('.jplus-setting-vue').mousedown(function(event) {
                        if (event.which != 1) return;
                        theInterval = setInterval(function() {
                            vm.crowdfunding.goal =
                                (parseFloat(vm.crowdfunding.goal) ?parseFloat(vm.crowdfunding.goal):0) + addVelocity;
                            counter++;
                            if (addVelocity < 25) {
                                addVelocity++;
                            }

                        }, 400);
                    });
                    $(this.$el).find('.jplus-setting-vue').mouseup(function() {
                        window.clearInterval(theInterval);
                        if (counter === 0) {
                            vm.crowdfunding.goal++; 
                        }
                        counter = 0;
                        addVelocity = 1;
                    });

Comments

[Nikita Dergachov]

Мне по тз сказано, что должно работать и левая кнопка и правая и сразу две.)

[Евгений Калибров]

К тому же зачем ты отлавливаешь отдельно два события mousedown и mouseup, не проще повесить все на click?

$(this.$el).find('.jplus-setting-vue').on('click', function(event) {
    if (event.which != 1) return;
    vm.crowdfunding.goal++; 
});

[Евгений Калибров]

Никита Дергачев, а повторно голосовать тоже можно по ТЗ?

[Nikita Dergachov]

Евгений Калибров, можно

[Евгений Калибров]

Никита Дергачев, прям сразу? Какой смысл от такого голосования, кто больше нажмёт кнопку? ) Или это не голосование?

[Nikita Dergachov]

Евгений Калибров, Это не голосование, это сумма цели для доната).

[Евгений Калибров]

Никита Дергачев, какой дурак будет кликать по ней правой кнопкой мыши или двумя сразу? Я бы убедил заказчика не делать этого, но если уж очень надо, то поставьте небольшой таймаут в обработчик клика:

var isTimeOut = false;
$(this.$el).find('.jplus-setting-vue').on('click', function(event) {
    if (isTimeOut == true) {
      return;
    } else {
      vm.crowdfunding.goal++; 
      isTimeOut = true;
      setInterval(function() {
        isTimeOut = false;  
      }, 50);    
    }
});

Вместо 50 подберите оптимальное значение