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 &am

Solution 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.

Solution 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..

functionGetMouseButton(e) {
    // Normalize event variablevar 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 eventif(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 directionvar direction = e.detail ? e.detail * (-120) : e.wheelDelta;
        // And name the direction as a 'button'switch(direction) {
            case120: // Browsers use different variants of thesecase240: 
            case360: 
                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) */functionBind(elem, type, eventHandle) {
    if (elem == null || elem == undefined) return;
    if ( elem.addEventListener ) {
        elem.addEventListener( type, eventHandle, false );
    } elseif ( 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
 */varMouseWheelEvent = 
(/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.