mousemove and cross-browser e.which

I need to know which mouse key is pressed on every mousemove event, and I try to use this:


    getMouseCode: function(e) {
        e = e || window.event;
        if (!e.which && e.button) {
            if      (e.button & 1) e.which = 1;
            else if (e.button & 4) e.which = 2;
            else if (e.button & 2) e.which = 3;
        };
        return e.which;
    },

But this is works only in chrome and IE7-8. IE9 debugger always says e.button == 0 and e.which == 1. After some debugging I figured out that window.event for IE9 contains right value of which, so I swapped


e = window.event || e;

This also does the trick for Safari & Air, but Firefox has window.event undefined, and Opera has the same wrong values in both callback argument and window.event objects.

回答1:

I was looking at this question when investigating a related issue. It turned out that my issue was that I needed to use separate functions to handle onclick and onmouseover events.

I have found that when using Opera, Safari and FireFox, the "which" property of the mousemove event object is set to 1 when no mouse button has been clicked.

回答2:

Though this answer may be kind of late, I am sure it will help those in the future. I stumbled upon this question while searching for this cross browser feature and originally disregarded it. I am back to provide my answer for those that follow in my footsteps.

First, some knowledge. I found this site very helpful, as all the cross browser issues (well most) are worked out, and laid out for your amusement (I laugh when us developers need to create charts and diagrams to how browsers work..)

http://unixpapa.com/js/mouse.html

On this page, near the bottom, you will find a blue link that says "Click here with various mouse buttons to test", above this you will see a code snippet. This goes into your mousedown or mouseup. If you right click and view the source at this location, you will find a script tag that holds 2 functions, the one above this link, and a 'dont' function that prevents the events from doing their default, or falling through, though not needed in all cases, is useful to know about.

The second piece of knowledge comes from another website, and provides us some insight into how to capture the mouse wheel up and down events.

http://www.javascriptkit.com/javatutors/onmousewheel.shtml

To put this all together in 1 place, we basically have the following..

function GetMouseButton(e) {
    // Normalize event variable
    var e = window.event || e;
    // Set button to initially not recognized (or false if you need to to be)
    var button = 'Not Recognized';

    // Check if this is a button push event
    if(e.type == 'mousedown' || e.type == 'mouseup') {
        if (e.which == null) {
            // Check if IE, if so, what e.button was pressed
            button = (e.button < 2) ? "Left" :
                ((e.button == 4) ? "Middle" : "Right");
        } else {
            // All other browsers, what e.which was pressed
            button = (e.which < 2) ? "Left" :
                ((e.which == 2) ? "Middle" : "Right");
        }
    } else {
        // If this is not a button push event, then we get the direction
        var direction = e.detail ? e.detail * (-120) : e.wheelDelta;
        // And name the direction as a 'button'
        switch(direction) {
            case 120: // Browsers use different variants of these
            case 240: 
            case 360: 
                button = "Middle Scroll Up";
            break;
            case -120:
            case -240:
            case -360:
                button = "Middle Scroll Down";
            break;
        }
    }

    alert(button);
}

/* Simple Bind function (like jQuery's for example) */
function Bind(elem, type, eventHandle) {
    if (elem == null || elem == undefined) return;
    if ( elem.addEventListener ) {
        elem.addEventListener( type, eventHandle, false );
    } else if ( elem.attachEvent ) {
        elem.attachEvent( "on" + type, eventHandle );
    } else {
        elem["on"+type]=eventHandle;
    }
}

/* Bind your mousedown / mouseup to the window, as well as the mousewheel */
Bind(window, 'mousedown', GetMouseButton);
Bind(window, 'mouseup', GetMouseButton);

/* One of FireFox's browser versions doesn't recognize mousewheel,
 * we account for that in this line
 */
var MouseWheelEvent = 
(/Firefox/i.test(navigator.userAgent))? "DOMMouseScroll" : "mousewheel";

Bind(window, MouseWheelEvent, GetMouseButton);

To save you some time [and knowledge, if you don't care to look at these links], you can view a working example at the following jsfiddle:

http://jsfiddle.net/BNefn/

EDIT I should have also said, that since you need to know this on every mousemove event, you can simply store the resulting button 'name' and event type (down or up), and then recall that variables information during your mousemove event. If you have a variable for each of these "buttons" you can then see which button is pressed and which isn't, and clear the variables that are pressed on mouseup.