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

Question

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?

Answer 1

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

Answer 2

In the situation you're describing, the issue is that you're handling mouseup and mousedown states only. You should also consider handling blur events to know that the mouse has left the object. You might want to assign it the same handler for mouseup.