What is the type of the event?
This is the only question with a true cross-browser answer: use the type
property to read out the type:
Which HTML element is the target of the event?
W3C/Netscape says: the target
. No, says Microsoft, the srcElement
. Both properties return the HTML element the event took place on.
The last two lines of code are especially for Safari. If an event takes place on an element that contains text, this text node, and not the element, becomes the target of the event. Therefore we check if the target'snodeType
is 3, a text node. If it is we move to its parent node, the HTML element.
Which key has been pressed?
This one is rel <script src="http://hi.images.csdn.net/js/blog/tiny_mce/themes/advanced/langs/zh.js" type="text/javascript"></script> <script src="http://hi.images.csdn.net/js/blog/tiny_mce/plugins/syntaxhl/langs/zh.js" type="text/javascript"></script> atively easy. First get the code of the key (a = 65) from thekeyCode
property.
When you’ve read out the key code, send it through the methodString.fromCharCode()
to obtain the actual key value, if necessary.
Which mouse button has been clicked?
There are two properties for finding out which mouse button has been clicked: which
and button
. Please note that these properties don’t always work on a click
event. To safely detect a mouse button you have to use the mousedown
or mouseup
events.
which
is an old Netscape property. Left button gives a value of 1, middle button (mouse wheel) gives 2, right button gives 3. No problems, except its meager support (and the fact that it’s also used for key detection).
Now button
has been fouled up beyond all recognition. According to W3C its values should be:
- Left button – 0
- Middle button – 1
- Right button – 2
According to Microsoft its values should be:
- Left button – 1
- Middle button – 4
- Right button – 2
No doubt the Microsoft model is better than W3C’s. 0 should mean “no button pressed”, anything else is illogical.
Besides, only in the Microsoft model button values can be combined, so that 5 would mean “left and middle button”. Not even Explorer 6 actually supports this yet, but in the W3C model such a combination istheoretically impossible: you can never know whether the left button was also clicked.
In my opinion W3C has made some serious mistakes in defining button
.
Right click
Fortunately you most often want to know if the right button has been clicked. Since W3C and Microsoft happen to agree on this one and givebutton
a value of 2, you can still detect a right click.
Please note that, although Macs have only one mouse button, Mozilla gives a Ctrl–Click a button
value of 2, since Ctrl–Click also brings up the context menu. iCab doesn’t yet support mouse button properties at all and you cannot yet detect a right–click in Opera.
Mouse position
As to the mouse position, the situation is horrible. Although there are no less than six mouse coordinates property pairs, there is no reliable cross–browser way to find the mouse coordinates relative to the document we need.
These are the six property pairs — see also the Event compatibility tables or the W3C DOM Compatibility - Events page.
- clientX,clientY
- layerX,layerY
- offsetX,offsetY
- pageX,pageY
- screenX,screenY
- x,y
I explained the problem, W3C’s vagueness and the use of pageX/Y
andclientX/Y
in my slightly outdated Evolt article.
The screenX
and screenY
properties are the only ones that are completely cross–browser compatible. They give the mouse position relative to the entire computer screen of the user. Unfortunately this information is completely useless: you never need to know the mouse position relative to the screen — well, maybe only if you want to place another window at the mouse position.
The other three property pairs are unimportant. See the W3C DOM Compatibility - Events page for a description.
Correct script
This is the correct script for detecting the mouse coordinates: