javascript - 如何知道鼠标按钮的当前状态(mouseup state or mousedown state)

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，你无法检测是否在 mousemove 处理程序中按下了左键，因为当没有按下按钮时 e .button 报告 0 并且当左键被按下时 - 你猜怎么着？ - e.button 报告 0! (对于符合 W3C 标准的浏览器)。这是我完全同意 Internet Explorer 的“二进制标志”实现的时代之一:

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

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

适用于 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;" />