Convert IE event.button to W3C event.button

Question

In mouse mode down (and up), I need to check which mouse button changed its state. It's pretty easy with the W3C model and even the old netscape mode (event.which), but IE gives me a headache. I know that event.button in IE is a bitmask, but the problem is that I cannot find out which button was clicked from that bitmask. If IE gives me event.button == 3, then I can’t tell if the user pressed the left button when the right button was already pressed, or if the user pressed the right button when the left button was already pressed.

To solve this problem once and for all, I am looking for a good one-stop solution for converting a broken IE event into a W3C compatible event. Maybe someone has already done this and wants to share it?

Answer 1

IMO (and quirksmode's ), the IE bitmask 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 (pressing all the pressed buttons and the new button pressed) will be even better.

I don’t know the library or script that is already doing what you are trying to do, I think most developers simply ignore combo clicks if they don’t want to apply a specific action to the combo click. In addition, it is quite complicated, you will have to detect both onmousedown and onmouseup for the entire document and record the state of the mouse buttons. Then on the element on which you want to use your magic, subtract the previous state of the mouse from the new one. Something like (verified):

 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 can go wrong with this script. For example, in my example, I have a warning window that appears with the actual state of the button. If you release the button while the notification dialog is raised, the document will not be detected by the mouse, and it will throw everything out of impact. Similarly, any mouseup or mousedown events on other elements that stop propagating to the documentElement event handler can cause it to break.

If you want my advice, display a message on a combined mouse click, guess the "right" mouse button or ignore them all together. Any of these options is better than a hacker approach.

Answer 2

You may find this page useful: http://unixpapa.com/js/mouse.html . It has a section on detecting a mouse button that I used before and found it useful and accurate, including the following:

As long as there is no browser-independent way to recognize which mouse button is which for all browsers examined, you can come very close. the following test works for all browsers except Opera 7. (It mixes the right and middle mouse buttons in Opera 7, but Opera 7 is quite old, there were only a few versions, where the middle buttons even worked, and only if the user installed an obscure version, so that you really don't care.) It also incorrectly handles the simultaneous clicks of multiple button mice in IE. To do this, the application must track which buttons are reported to be past mousedown events so that it can indicate which one has been added.

 if (event.which == null) /* IE case */ button= (event.button < 2) ? "LEFT" : ((event.button == 4) ? "MIDDLE" : "RIGHT"); else /* All others */ button= (event.which < 2) ? "LEFT" : ((event.which == 2) ? "MIDDLE" : "RIGHT"); 

Answer 3

This article may help:

How to align IE and W3C event models