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

How to know the current state of mouse button(mouseup state or mousedown state)

本文关键字：状态 mouseup mousedown 鼠标 何知道 按钮      更新时间：2023-09-26

在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向上或向下值

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

回答问题

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

进一步信息

老好人Quirksmode对此有话要说。。。这基本上意味着，多亏了W3C，你无法检测鼠标移动处理程序中是否按下了左按钮，因为当没有按下按钮时，e.button报告为0，而当按下左按钮时-你猜怎么着？-e.button报告0（适用于W3C兼容的浏览器）。这是我完全同意InternetExplorer的"二进制标志"实现的一次：

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;" />

在您描述的情况中，问题是您只处理mouseup和mousedown状态。您还应该考虑处理blur事件，以知道鼠标已离开对象。您可能希望为它分配与mouseup相同的处理程序。

为什么不使用可以处理此类事件的jquery拖动呢？

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

$(object).on("mouseup",function(){});
相关文章：