Javascript mouse event Summary

There are eight common examples:
Mousedown: the mouse button is pressed.
Mouseup: the mouse button is released.
Click: click the mouse button.
Dblclick: the mouse button is pressed.
Contextmenu: Right-click the menu.
Mouseover: move the mouse over the target.
Mouseout: move the mouse over the target.
Mousemove: move the mouse over the target.
The mousedown event and the mouseup event can be said to be the time subdivision of the click event. The order is mousedown => mouseup => click. Therefore, a click event usually triggers several mouse events.

Click here to test how many mouse events are bound to one click ?! <P> <button type = "button" id = "clearcontent"> clear </button> </p>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
With them, we can do many things, but it is obviously not enough for high-level applications (such as games, therefore, the Click Event of the mouse event is further subdivided based on whether it is a left-click or right-click event. In DOM2.0, W3C uses the mouse event as an example, and the mouse event is parsed as a MouseEvent (we can use e. constructor = MouseEvent to determine whether it is a mouse event. Whether it is left-click or right-click is determined by a button attribute. The following is the W3C standard example:

0: Left click
1: press the middle key (if any)
2: Right-click
Of course, Microsoft will not compromise, because e. button was originally implemented by Microsoft, and the Web site uses e. which, but it is more complicated than Microsoft.

0: no key is pressed
1: Left click
2: Right-click
3: The left and right buttons are pressed at the same time.
4: press the middle key
5: both the left and middle buttons are pressed.
6: The key and right-click are both pressed
7: The three keys are simultaneously pressed.
For more details, see the table below.
GE: Gecko; SA: Safari; OP: Opera; NS: Netscape

		IE	NS 4	GE ≥ 1.0 SA 3 OP ≥ 8.0	GE0.9	OP <1, 8.0
E. button	Left click	1	Undefined	0	1	1
	Key	4	Undefined	1	2	3
	Right-click	2	Undefined	2	3	2
E. which	Left click	Undefined	1	1	1	1
	Key	Undefined	2	2	2	3
	Right-click	Undefined	3	3	3	2

Therefore, we can use the following functions to bind the left and right keys.
Copy codeThe Code is as follows:
Var mouseEvent = function (){
Var arg = arguments [0],
El = arg. el | document,
Leftfn = arg. left | function (){},
Rightfn = arg. right | function (){},
Middlefn = arg. middle | function (){},
Buttons = {};
El. onmousedown = function (e ){
E = e | window. event;
If (! + "\ V1 "){
Switch (e. button ){
Case 1: buttons. left = true; break;
Case 2: buttons. right = true; break;
Case 4: buttons. middle = true; break;
}
} Else {
Switch (e. which ){
Case 1: buttons. left = true; break;
Case 2: buttons. middle = true; break;
Case 3: buttons. right = true; break;
}
}
If (buttons. left ){
Leftfn ();
} Else if (buttons. middle ){
Middlefn ();
} Else if (buttons. right ){
Rightfn ();
}
Buttons = {
"Left": false,
"Middle": false,
"Right": false
};
}
}

It accepts a hash parameter and is optional. The hash el is the element to bind the mouse event, left is the event triggered by the left click, and the other two are similar. The usage is as follows:
Copy codeThe Code is as follows:
Var el = document. getElementById ("mouse ");
Var ex = document. getElementById ("explanation ");
Var left = function (){
Ex. innerHTML = "Left click pressed ";
}
Var right = function (){
Ex. innerHTML = "right-click and press ";
}
MouseEvent ({el: el, left: left, middle: null, right: right });

Click here to test the function of binding the left-right mouse key.
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
In addition, you can obtain many useful parameters by clicking the mouse on the webpage, such as obtaining the coordinates of the current mouse. Based on the differences of the reference object, it is divided into the following sets of coordinate systems. One set uses the visible area of the current browser as the reference object (clientX, clientY), and the other set uses the screen of the display as the reference object (screenX, screenY ). In addition, Microsoft also has a set of Coordinate Systems (x, y), which are relative to the offsetParent of the event object. Firefox has another coordinate system (pageX, pageY), which is relative to the current webpage. We can use the following function to obtain the coordinates of the mouse on the webpage.
Copy codeThe Code is as follows:
Var getCoordInDocument = function (e ){
E = e | window. event;
Var x = e. pageX | (e. clientX +
(Document.doc umentElement. scrollLeft
| Document. body. scrollLeft ));
Var y = e. pageY | (e. clientY +
(Document.doc umentElement. scrollTop
| Document. body. scrollTop ));
Return {'X': x, 'y': y };
}

Move the mouse here.
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]

(ClientX, clientY) coordinate system, not affected by the scroll bar
As for mouseover, mousemove, and mouseout, there is no difference in the browser. Let's take a look at the scroll wheel event. This difference is very serious. IE, Safari, Opera, and chrome are mousewheel events, while Firefox is a DOMMouseScroll event. In terms of event attributes, IE and so on are event. wheelDelta, and Firefox is event. detail. IE and so on are rolled up to 120, and rolled down to-120. Firefox rolls up a circle to-3, and it rolls down a circle to 3. We can construct a function to remove their differences.
Copy codeThe Code is as follows:
Var mouseScroll = function (fn ){
Var roll = function (){
Var delta = 0,
E = arguments [0] | window. event;
Delta = (e. wheelDelta )? E. Maid/120:-(e. detail | 0)/3;
Fn (delta); // The callback function in the callback function
}
If (/a/[-1] = 'A '){
Document. addEventListener ('dommousescroll', roll, false );
} Else {
Document. onmousewheel = roll;
}
}

This function accepts a function as a parameter, for example:
Copy codeThe Code is as follows:
MouseScroll (function (delta ){
Var obj = document. getElementById ('scroll '),
Current = parseInt (obj. offsetTop) + (delta * 10 );
Obj. style. top = current + "px ";
});

<Style title = "text/css"> # scroll {color: # fff; background: #369; width: 70px; height: 70px; position: absolute; left: 500px; top: 200px ;}</style> move the box with the scroll wheel
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]