如何知道鼠标按钮的当前状态（mouseup 状态或 mousedown 状态）

Question

在 Javascript 中，当我单击滚动条（页面中出现的任何滚动条）并将鼠标悬停在图像上时，图像再次开始拖动。

图像只能在鼠标按下状态下拖动。

所以我试图通过了解鼠标按钮状态（mousedown 或 mouseup）来解决这个问题

这个问题只存在于IE和chrome，我试过的其他浏览器没有。

Javascript：

document.onmousemove = mouseMove;
document.onmousedown = mouseDown;
document.onmouseup   = mouseUp;

function mouseMove(ev) {

    var mouseButtonState;
    // put code here to get mouseButtonState variable
    console.log('state of mouse is'+mouseButtonState);
}

当我移动鼠标时，程序应该显示所需的值mouseButtonState up 或 down

我如何知道鼠标按钮的当前状态？

Answer 1

回答问题

我不太确定为什么当点击发生在浏览器之外时您的系统决定拖动图像（或在图像之外）.. 为了正确回答这个问题我需要查看您的实际代码（只需鼠标事件即可）。但是，如果您实现了我在下面提到的系统，那么您应该不会遇到您要问的问题。

更多信息

好老的 Quirksmode 对此有话要说...这基本上相当于这样一个事实，即由于 W3C，您无法检测到鼠标移动处理程序中是否按下了左键，因为当没有按下任何按钮时 e.button 报告0 并且当按下左键时 - 你猜怎么着？ - e.button 报告 0！ （对于兼容 W3C 的浏览器）。这是我完全同意 Internet Explorer 的“二进制标志”实现的时候之一：

http://www.quirksmode.org/js/events_properties.html#button

获得鼠标状态的唯一方法 - 我知道 - 是使用 mousedown 和 mouseup 检测和记录 - 这听起来像你已经在做的事情。现在我还没有机会玩任何新的基于“触摸”的事件，他们可能会帮助你……但让它在跨浏览器上工作会很棘手。在一天结束时，有时您必须承认您是在浏览器环境中工作，而且它永远不会像专门设计的应用程序那样流畅。

适用于 Internet Explorer 的快速代码：

document.body.onmousemove = function(e){
  e = e ? e : Event;
  if ( e.button == 1 ) {
    /// mouse button is pressed
  }
}

适用于 IE 和几乎其他任何东西的快速代码：

var delm = document.documentElement ? document.documentElement : document.body;
var buttonPressed = false;

delm.onmousdown = function(e){
  buttonPressed = true;
}

delm.onmousup = function(e){
  buttonPressed = false;
}

delm.onmousmove = function(e){
  if ( buttonPressed ) {
    /// the button is pressed, but only whilst being 
    /// detected inside the browser
  }
}

正如其他发帖人所指出的，您可以尝试实现一个系统，该系统可以检测用户指针何时离开/重新进入浏览器环境 - 但多年来我在这方面的所有尝试从未非常成功。 Flash 对此有更好的支持，但我怀疑你会想去那里......

旁注

正如一些历史信息，今天可能仍然有用，当处理拖动图像时，旧版本的 Internet Explorer 要求在拖动成功之前将以下内容应用于图像。这防止了默认的浏览器拖动系统插入和妨碍。有比使用内联处理程序更好的方法来实现这一点，但为了简单明了，我把它放在这里。

<img src="..." ondragstart="return false;" />

Answer 2

为什么不直接使用可以处理此类事件的 jquery drag 呢？

如果你真的想绑定 mouseup 和 mousedown 你可以使用 jquery

$(object).on("mouseup",function(){});

Answer 3

在您描述的情况下，问题在于您仅处理 mouseup 和 mousedown 状态。您还应该考虑处理blur 事件以了解鼠标已离开对象。您可能希望为 mouseup 分配相同的处理程序。