Question

On mouse-down (and up) I need to check which mouse button has changed its state. This is pretty easy with the W3C model and even the old netscape way (event.which) but IE gives me a headache. I know that event.button in IE is a bitmask but the problem is that I can’t find out which button was pressed from this bitmask. If IE gives me event.button == 3 then I can’t tell if the user pressed the left button while the right button was already down or if the user pressed the right button while the left button was already down.

To solve this problem once and for all I’m searching for a nice generic solution to convert the broken IE event into a W3C compatible event. Maybe someone already did that and wants to share?

Answer 1

IMO (and quirksmode’s), IE’s bitmasking is better than the W3C version because you can detect combo clicks, like left+right or middle+left. It offers a bit more flexibility. Both (total buttons pressed and newest button pressed) would be even better.

I don’t know of a library or script that already does what you’re trying to do, I think most devs would just ignore combo clicks unless they wanted to apply a specific action to a combo click. Also, it’s rather tricky, you’d have to detect both onmousedown and onmouseup for the entire document and record the state of the mouse buttons. Then on the element you want to work your magic on, subtract the previous mouse state from the new one. Something like (tested):

if (document.attachEvent)
{
    (function ()
    {
        var mState = 0;
        document.documentElement.attachEvent("onmousedown", function () 
        {
            mState += event.button;
        });
        document.documentElement.attachEvent("onmouseup", function () 
        {
            mState -= event.button;
        });
        document.getElementById("jim").attachEvent("onmousedown", function ()
        {
            var realButton = event.button - mState;

            alert(realButton); 
            // Your code here
        });
    })();
}

Of course, there are only about a million things that could go wrong with this script. For instance, in my example there I have an alert window that pops up with the real button state. If you release the button whilst that alert dialog is up, the document won’t detect the mouseup and it will throw everything out of whack. Likewise, any mouseup or mousedown events on other elements that stop propagation up to the documentElement’s event handler would cause it to break.

If you want my advice, display a message on a combo mouse click, guess at the "correct" mouse button or ignore them all together. Any one of those options is better than a hacky approach.