Блог

У меня есть следующий код для определения направления движения мыши

 var direction = "";
var oldx = 0;
var oldy = 0;

mousemovemethod = function(e) {
  if (e.pageX > oldx amp;amp; e.pageY == oldy) {
    direction = "East";
  } else if (e.pageX == oldx amp;amp; e.pageY > oldy) {
    direction = "South";
  } else if (e.pageX == oldx amp;amp; e.pageY < oldy) {
    direction = "North";
  } else if (e.pageX < oldx amp;amp; e.pageY == oldy) {
    direction = "West";
  }

  document.body.innerHTML = direction;

  oldx = e.pageX;
  oldy = e.pageY;

}

document.addEventListener('mousemove', mousemovemethod);
 

Как сделать так, чтобы приведенный выше код работал только

1. Если сработает щелчок левой или правой кнопкой мыши
2. Когда мышь перемещается
3. Если пользователь удерживает клавишу CTRL и перемещает мышь

Я знаю, что могу обнаружить щелчок CTRL со следующим кодом

 $(document).keyup(function(e) {
  if (e.keyCode == 17) {
    console.log("cntrl key pressed");
  }
});
 

P. s : Мне нужно, чтобы событие mousemove вызывалось непрерывно, когда я пытаюсь увеличивать и уменьшать масштаб диаграмм в своем приложении.

У вас есть два (или более) события (перемещение мыши, нажатие клавиши (скорее всего, нажатие клавиши вниз и вверх/отпускание для правильной обработки ctrl или использования значения, указанного в событии) и щелчок мыши). Между ними создайте глобальную переменную (т. Е. простую переменную, которая находится рядом со всеми 3 функциями событий), которая доступна во всех этих функциях событий. Установите для этой переменной значение true/false в событиях нажатия клавиши и щелчка мыши и проверьте это в событии перемещения мыши.

Этот код показывает ваше сообщение только в том случае, если (нажата клавиша ctrl или нажата левая/правая кнопка мыши) и мышь перемещена:

 var direction = "";
var oldx = 0;
var oldy = 0;
var mouseIsHeld = false;
mouseMoveMethod = function (e) {
    if (e.ctrlKey || mouseIsHeld) {
        if (e.pageX > oldx amp;amp; e.pageY == oldy) {
          direction="East";
        }
        else if (e.pageX == oldx amp;amp; e.pageY > oldy) {
          direction="South";
        }
        else if (e.pageX == oldx amp;amp; e.pageY < oldy) {
          direction="North";
        }
        else if (e.pageX < oldx amp;amp; e.pageY == oldy) {
          direction="West";
        }

        document.body.innerHTML = direction;

        oldx = e.pageX;
        oldy = e.pageY;
    }
}

mouseDownMethod = function (e) {
    if (e.button === 0 || e.button === 2) {
        mouseIsHeld = true;
    }
}

mouseUpMethod = function (e) {
    if (e.button === 0 || e.button === 2) {
        mouseIsHeld = false;
    }
}

document.addEventListener('mousemove', mouseMoveMethod);
document.addEventListener('mousedown', mouseDownMethod);
document.addEventListener('mouseup', mouseUpMethod);
// Prevent context menu popup, so we can move our mouse.
document.addEventListener('contextmenu', function(e) {
    e.preventDefault();
    return false;
}, false);