如何知道鼠标按钮的当前状态（mouseup状态或mousedown状态） [英] How to know the current state of mouse button(mouseup state or mousedown state)

问题描述

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

图像应该只是拖动鼠标按钮的状态。

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

这个问题只存在于 IE 和 chrome 中，而不是在我试过的其他浏览器中。

Javascript：

  document.onmousemove = mouseMove; 
 document.onmousedown = mouseDown; 
 document.onmouseup = mouseUp; 
 
函数mouseMove（ev）{
 
 var mouseButtonState; 
 //在此处放置代码以获取mouseButtonState变量
 console.log（'mouse of mouse is'+ mouseButtonState）; 
} 
  

当我移动鼠标时，程序应该显示所需的 mouseButtonState 向上或向下 鼠标状态的按钮？

解决方案

回答问题

我不确定为什么你的系统决定在点击发生在浏览器外（或者在图像之外）之外时拖动图像 ..为了正确回答， d需要看到你的实际代码（只需鼠标事件就可以）。然而，如果您按照我下面提到的方式实施系统，那么您不应该遇到您询问的问题。

更多信息

Good old Quirksmode对此有些话要说......基本上，这归功于W3C无法检测到鼠标移动处理程序中是否按下左按钮，因为没有按下任何按钮 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：事件; 
 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）{
 ///按钮被按下，但只有
 ///在浏览器中检测到
 
 
 code $ 
 
 
 
其他海报已经注意到你可以尝试一个实现一个系统，可以检测用户的指针何时离开/重新进入浏览器环境 - 但我多年来的所有尝试都从未获得过成功。 Flash有更好的支持，但我怀疑你会去那里...... 
 
 
 
附注
 
 
 
就像一些历史信息，今天仍然可以使用，在处理拖拽图像时，在拖拽成功之前，旧版Internet Explorer需要将以下内容应用于图像。这阻止了默认的浏览器拖动系统切入和阻碍。 
 < img这里有更好的方法来实现这一点，而不是使用内联处理程序。 src =...ondragstart =返回false; /> 
  
 
In Javascript, when I click on a scrollbar (Any scrollbar that appears in the page) and hover over the image, the image again start to drag.

Image should only be drag on mousebutton down state.

So I tried to tackle this problem by knowing the mouse button state (mousedown or mouseup)

This problem only exists in IE and chrome and not in the other browsers I tried.

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);
}
When I moved my mouse, the program should show the required value of mouseButtonState up or down 

How do I know the current state of the mouse button?
解决方案
In answer to the question

I'm not quite sure why your system is deciding to drag an image when the click has occured outside the browser (or outside the image for that matter).. in order to answer that properly I'd need to see your actual code (just the mouse events would do). However if you implement a system as I mention below then you shouldn't get the problem you are asking about.

Further Information

Good old Quirksmode has something to say about this... That basically amounts to the fact that thanks to W3C you can't detect if the left button is pressed in a mousemove handler because when no buttons are pressed e.button reports 0 and when the left button is pressed - guess what? - e.button reports 0! (for W3C complient browsers that is). It was one of the times where I totally agree with Internet Explorer's "binary flag" implementation:

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

The only way to get the mouse state - that I know of - is to detect and record using mousedown and mouseup - which sounds like what you are already doing. Now I haven't had the chance to play around with any of the newer "Touch" based events, and they might be able to help you out... but it'll be tricky getting it working crossbrowser. At the end of the day sometimes you have to accept you are working in a browser environment and it will never be as smooth as a specifically designed app.

Quick code that will work for Internet Explorer:
document.body.onmousemove = function(e){
  e = e ? e : Event;
  if ( e.button == 1 ) {
    /// mouse button is pressed
  }
}
Quick code that will work for IE and pretty much anything else:
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
  }
}
As other posters have noted you could try an implement a system that could detect when the user's pointer has left/re-entered the browser environment - but all my attempts at this over the years have never been very successful. Flash has better support for this, but I doubt you'll want to go there...

Side note

Just as a bit of historical information, that may still be of use today, when dealing with dragging images older versions of Internet Explorer required the following to be applied to the image before the drag would be successful. This prevented the default browser dragging system from cutting in and getting in the way. There are better ways to implement this than using an inline handler, but I put this here for simplicity and clarity.
<img src="..." ondragstart="return false;" />


                        
这篇关于如何知道鼠标按钮的当前状态（mouseup状态或mousedown状态）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！