时间戳

首页 > 解决方案 > 将多个事件与 mousemove 结合

javascript - 将多个事件与 mousemove 结合

问题描述

我有以下代码来检测鼠标移动方向

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

mousemovemethod = function(e) {
  if (e.pageX > oldx && e.pageY == oldy) {
    direction = "East";
  } else if (e.pageX == oldx && e.pageY > oldy) {
    direction = "South";
  } else if (e.pageX == oldx && e.pageY < oldy) {
    direction = "North";
  } else if (e.pageX < oldx && 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");
  }
});

Ps：当我试图放大和缩小我的应用程序中的图表时，我需要一个 mousemove 事件来连续调用。

标签： javascript

解决方案

您有两个（或更多）事件（鼠标移动、按键（很可能是按下和向上/释放键以正确处理 ctrl 或使用事件提供的值）和鼠标单击）。在它们之间创建一个全局变量（即所有 3 个事件函数旁边的一个简单变量），它在所有这些事件函数中都可用。在按键和鼠标单击事件中将此变量设置为真/假，并在鼠标移动事件中检查它。

此代码仅在（按下 ctrl 或按住鼠标左/右键）并且鼠标移动时显示您的消息：

var direction = "";
var oldx = 0;
var oldy = 0;
var mouseIsHeld = false;
mouseMoveMethod = function (e) {
    if (e.ctrlKey || mouseIsHeld) {
        if (e.pageX > oldx && e.pageY == oldy) {
          direction="East";
        }
        else if (e.pageX == oldx && e.pageY > oldy) {
          direction="South";
        }
        else if (e.pageX == oldx && e.pageY < oldy) {
          direction="North";
        }
        else if (e.pageX < oldx && 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);

推荐阅读