Блог

Главная - Вопросы по программированию - Есть одна кнопка с двумя различными вариантами поведения для щелчка и мыши вниз

Есть одна кнопка с двумя различными вариантами поведения для щелчка и мыши вниз

#javascript #mouseevent

Вопрос:

Я хочу, чтобы одна и та же кнопка вела себя по-разному при щелчке левой кнопкой мыши и при нажатии левой кнопкой мыши. При щелчке он должен добавить 15 к текущему числу, при наведении мыши он добавляет 1 до тех пор, пока мышь не нажата

 var value = 0;
document.getElementById("Addbtn").addEventListener("mousedown", mouseDown);
document.getElementById("Addbtn").addEventListener("click", mouseClick);

function mouseDown() {
  this.value  ;
  document.getElementById("demo").innerHTML = this.value.tosSring();
}


function mouseClick() {
  this.value  = 15;
  document.getElementById("demo").innerHTML = this.value.tosSring();
}

Проблема в том, что оба события срабатывают, и я хочу различать их, поэтому, когда мышь удерживается нажатой, щелчок не срабатывает, и наоборот.

Есть ли способ достичь этого? Овации

Комментарии:

1. mouseup не решает проблему здесь? вместо щелчка я имею в виду

2. @Shai нет — мышь вверх также срабатывает при отпускании мыши в режиме мыши вниз — так что это будет 1, а в конце добавит еще 15 🙁

3. Ах, все в порядке, понял, так что вы хотите избежать опускания мыши по щелчку, вы согласны подождать 1 или 2 секунды перед запуском события опускания мыши? Я имею в виду, что если вы можете выполнить тайм-аут в 2 секунды, например, при наведении курсора мыши, то, если произошел щелчок, отмените тайм-аут. Это приведет к отключению мыши, но ничего не сделает, если пользователь не удержит мышь более 2 секунд

4. Чтобы повторить вопрос @Shai-как долго пользователь должен удерживать кнопку мыши нажатой, чтобы вы считали это «удержанием», а не «щелчком»?

5. @shai может подождать максимум секунду, прежде чем начать добавлять 1, mouse down но не дольше. Является ли это правильным подходом? если да, можете ли вы поделиться фрагментом кода, который это делает

Ответ №1:

Как я уже сказал в комментарии, поскольку click и mousedown связаны, и нет способа отключить их друг от друга, решение может быть немного хитрым, добавив тайм-аут, чтобы определить, было ли это «долгое удержание» мыши нажатой. Добавлен небольшой бонус, чтобы отключить щелчок, если была активирована кнопка мыши, вы можете удалить ее, если в этом нет необходимости. Также обратите внимание, что время ожидания составляет 1 секунду (1000 мс), измените его в зависимости от того, сколько вы можете подождать, прежде чем сказать, что это событие наведения курсора мыши. 1 секунда иногда кажется пользователю долгой ( около 500 мс-это приятное место для меня).

         var value = 0;
        var mouseHoldTimeout;
        var mouseDownDone = false;
        document.getElementById("Addbtn").addEventListener("mousedown", mouseDown);
        document.getElementById("Addbtn").addEventListener("click", mouseClick);

        function mouseDown() {
          mouseHoldTimeout = setTimeout(() => {
            value  ;
            mouseDownDone = true;
            document.getElementById("demo").innerHTML = value.toString();
          }, 1000);
        }


        function mouseClick() {
          if (mouseHoldTimeout) {
            clearTimeout(mouseHoldTimeout);
            mouseHoldTimeout = null;
          }
          if (mouseDownDone) {
            mouseDownDone = false;
            return;
          }
          value  = 15;
          document.getElementById("demo").innerHTML = value.toString();
        }

Ответ №2:

событие mousedown произойдет, когда вы нажмете либо влево, либо вправо, либо даже посередине.Не имеет значения, на какой из них вы нажимаете, он запускает функцию. Напротив, событие щелчка будет срабатывать при нажатии левой кнопки мыши.Таким образом, кажется, что при нажатии левой кнопки вы запускаете наведение курсора мыши(для левой) и нажимаете событие. Как указано в документе, событие щелчка срабатывает после наведения курсора мыши и наведения курсора мыши.

основы работы с мышью js

Метки: