6

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

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

4

3 回答 3

4

在回答这个问题

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

更多信息

好老的 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;" />
于 2012-09-16T08:42:36.753 回答
1

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

于 2012-08-30T07:31:02.647 回答
0

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

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

$(object).on("mouseup",function(){});
于 2012-08-30T07:19:19.377 回答