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

2024-07-03

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

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

所以我尝试通过了解鼠标按钮状态(mousedown或mouseup)来解决这个问题

这个问题只存在于IE and 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 or down

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


在回答问题时

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

更多信息

很好的老 Quirksmode 对此有话要说...这基本上相当于这样一个事实:由于 W3C,您无法检测鼠标移动处理程序中是否按下了左键,因为当没有按下任何按钮时e.button报告 0 并且当按下左按钮时 - 你猜怎么着? -e.button报告0!(对于符合 W3C 标准的浏览器来说)。这是我完全同意 Internet Explorer 的“二进制标志”实现的一次:

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

据我所知,获取鼠标状态的唯一方法是使用mousedown and 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;" />
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何知道鼠标按钮的当前状态(mouseup状态或mousedown状态) 的相关文章

随机推荐